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张 窒 旭 经 验 UNE 那 是 因为 有 星辰 的 指引 ， 
甘苦 CSS 世 界 中 想 要 不 断 突 破 瓶颈 ， 


十 年 实践 精华 系统 提炼 需要 有 本 书 的 指引 。 
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本 书 从 前 端 开 及 人 员 的 需求 出 及 ， 以 “法” 为 线索 ， 从 结构 、 内 容 到 美化 六 饰 等 方面 ， 全 面 且 深 
入 地 讲解 前 端 开发 人 员 必 须 了 解 和 掌握 的 大 量 的 CSS 知识 点 。 同 时 ， 作 者 结合 多 年 的 从 业经 验 ， 通 过 
大 量 的 实战 案例 ， 详 尽 解析 CSS 的 相关 知识 与 常见 问题 。 作 者 还 为 本 书 开 发 了 专门 的 配套 网 站 ， 进 行 
实例 展示 、 问 题 答疑 。 

作为 一 本 CSS 深度 学 习 的 书 ， 书 中 介绍 大 量 许 多 前 端 开发 人 员 都 不 知道 的 CSS 知识 点 。 本 书 语 言 
通俗 易 懂 ， 内 容 深 入 浅 出 ， 并 结合 实战 经 验 ， 更 适合 对 CSS 有 所 了 解 的 前 端 开发 人 员 阅 读 。 通 过 阅读 
本 书 ， 读 者 会 对 CSS 世界 的 深度 和 广度 有 一 个 全 新 的 认识 。 
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我 为 什么 会 写 这 本 书 


我 是 一 个 利他 主义 非常 明显 的 人 ， 这 多 半 与 小 时 候 都 是 在 他 人 的 帮助 下 成 长 有 关 ， 帮 
助 我 的 有 亲戚 、 邻 居 、 老 师 ， 以 及 很 多 不 认识 的 人 。 所 以 ， 现 在 的 自己 总 是 很 乐意 帮助 他 人 
成 长 。 

我 从 2007 年 读 大 三 的 时 候 开 始 接触 并 使 用 CSS， 到 现在 已 经 整整 10 年 了 ， 在 这 10 年 时 
间 里 ， 我 从 未 间断 过 对 CSS 的 研究 和 学 习 。 现 在 想 想 ， 能 够 坚持 下 来 还 真是 不 容易 ， 其 核心 动 
力 其 实 就 是 上 面 的 “帮助 他 人 ， 成 束 目 我 ”。 

开始 的 时 候 ， 我 和 大 多 数 人 一 样 ， 因 为 CSS 简单 ， 一 开始 成 长 很 快 ， 页 面 写 多 了 之 后 还 能 
够 总 结 出 一 些 准则 之 类 的 东西 ， 并 自我 感觉 恨 好 ， 或 许 是 自己 运气 好 ， 误 打 误 撞 走 出 了 庐山 幻 
境 ， 突 破 了 学 习 CSS 的 一 个 又 一 个 瓶颈 。 但 是 ， 在 与 诸多 同行 的 邮件 交流 中 我 发 现 ， 很 多 CSS 
开发 人 员 感 到 迷茫 ， 职 位 得 不 到 重视 ， 技 术 也 无 法 提高 ， 我 感觉 邮件 的 交流 一 次 最 多 只 能 帮助 
二 个人; 效 座 实在 太 低 。 

人 在 做 抉择 的 时 候 是 需要 有 一 些 指 引 的 。 实 际 上 ， 很 多 年 前 ， 我 自己 曾 犹 光 过 ， 是 否 要 继 
续 深 入 学 习 CSS， 探 索 每 一 个 边界 ， 因 为 对 于 个 人 而 言 ， 这 会 是 一 件 吃力 不 讨好 的 事情 ， 对 于 
CSS 这 门 语言 ，3 年 学 习 80 分 和 10 年 学 习 90 分 对 于 产品 价值 的 区 别 其 实 有 限 。 但 那 一 封 封 交 
流 邮件 坚定 了 上 自己 的 方向 ， 艰 兰 的 路 让 我 一 个 人 走 就 好 了 ， 等 我 踏 损 整个 CSS 世界 ， 再 把 完整 
的 地 图 绘制 出 来 ， 岂 不 就 能 帮助 更 多 人 了 ? 

所 以 ， 随 着 自己 的 不 断 前 行 ， 身 边 的 人 越 来 越 少 ， 少 到 好 像 就 我 一 个 人 ,无 比 孤 息 的 时 候 ， 
让 我 坚持 下 来 的 就 是 “日 后 可 以 帮助 更 多 人 ， 是 很 有 价值 的 ”的 信念 。 

10 年 过 去 了 ，10 年 的 努力 和 付出 终于 开始 开花 结果 ， 而 其 中 一 个 果实 就 是 《CSS 世界 》 
这 本 书 。 

10 年 风雨 积累 ， 踏 遍 CSS 世界 的 千 山 万 水 ， 哪 里 有 美景 ， 哪 里 有 秘境 ， 哪 里 是 陷阱 ， 哪 
里 是 路 径 ， 我 全 了 然 于 心 。 我 这 样 做 为 的 就 是 给 予 清 晰 明确 的 指引 ， 拓 展 对 CSS 世界 的 认 知 ， 
空气 CSS 的 潜力 ， 帮 助 他 人 突破 一 个 又 一 个 CSS 学 习 的 瓶颈 。 


为 何 需要 这 本 CSS 进 阶 书 


大 家 应 该 都 注音 到 了 了， 最 近 行 业 非 第 缺 症 问 开 友人 员 ， 前 并 开 友 人 员 培 训 机 构 也 如 雨 后 春 

































































2 一 一 尽 .一 


月 | 


了 | 


笋 般 大 量 涌现 。 拨 开眼 前 的 面纱 ， 定 睛 一 看 ， 会 发 现 ， 缺 的 其 实 不 是 前 端 ， 而 是 优秀 的 、 有 资 
历 的 、 技 术 有 深度 的 前 端 开 及 人员 。 

通过 和 一 些 前 端 同行、 某 些 人 力 资 源 接 触 和 我 收 到 的 诸多 人 简历 我 发 现 ， 目 前 的 现状 是 这 样 
的 : 行业 里 有 很 大 一 拨 儿 人 ， 也 自称 为 前 端 开 有 发 人 员 ， 但 他 们 仅仅 是 可 以 根据 设计 稿 写 出 页 面 
这 种 水 平 。 换 句 话说 ， 束 是 会 HTML 和 CSS 以 及 一 点 儿 JavaScript。 环 顾 四 周 ， 这 种 程度 的 人 
实在 是 太 多 了 ， 完 全 没有 任何 技术 上 的 优势 。 虽 然 这 些 也 是 前 端 开 发 人 员 ， 但 是 公司 要 抢 的 前 
并 开 发 人 员 并 不 是 这 类 人 。 

为 什么 会 这 样 呢 ? 

因为 CSS 这 门 语言 入 门 实在 是 太 简 单 了 ， 比 如 说 我 夫人 ， 完 全 不 懂 人 代码， 我 手把手 教 她 
1 个 星期 ， 写 出 一 个 长 得 像 某 某 网 首页 的 页 面 绝 对 是 没 问 题 的 ， 因 为 CSS 常用 属性 束 那 么 多 ， 
且 鲜 有 逻辑 ， 无 顷 算 法 ， 熟 记 各 个 属性 值 对 应 的 特性 瓯 能 上 手 了 。 上 所 以 ， 很 多 没有 编程 基础 
的 人 ,就 通过 HTML 和 CSS 进入 了 这 个 圈子 。 但 当 他 们 发 现 目 己 可 以 很 愉快 地 实现 页 面 的 时 
候 ， 就 会 觉得 CSS 也 就 这 样 ， 导 致 困 于 庐山 ， 目 步 不 前 ， 束 算 日 后 听 到 或 见 到 “CSS 深入 很 
难 ” 的 言论 并 打算 着 手 精进 ， 也 不 知道 接 下 来 该 怎么 走 、 如 何 突破 现 有 的 瓶 贷 ， 于 是 就 产生 
J 这 证 

这 类 高 不 成 低 不 束 的 前 端 人 员 和 急需 本 书 深 入 “CSS 世界 ”， 突 破 瓶 祷 ， 告 别 迷茫 。 

在 这 个 世界 上 ， 越 是 看 似 简单 的 东西 反而 越 是 难以 深入 ， 就 好 比 为 何 1+1 等 于 2? CSS 这 
门 语言 也 是 如 此 。 很 多 自 认 为 学 了 CSS 有 八 九 成 的 人 , 实际 上 仅仅 是 熟 记 CSS 手册 中 的 各 种 属 
性 ， 或 者 理解 一 些 CSS 概念 ， 再 进一步 ， 甚 至 对 某 一 两 个 CSS 属性 有 过 深入 的 分 析 。 但 是 ， 这 
些 人 依然 无 法 理解 很 多 页 面 上 看 似 简 单 的 现象 〈 我 想 更 多 的 是 根本 就 没 在 意 这 些 现象 )， 也 无 法 
基于 现 有 的 规则 创造 一 些 完 全 创新 的 CSS 实现 ， 仅 仅 停 留 在 熟练 地 使 用 这 种 程度 。 

为 什么 会 这 样 呢 ? 那 是 因为 CSS 是 一 门 有 别 于 传统 程序 语言 的 语言 。 绝 大 多 数 编程 语言 ， 
比方 说 JavaScript， 各 种 字符 串 、 数 组 、 方 法 ， 记 住 一 个 就 是 一 个 ， 使 用 的 时 候 ，forEach () 就 
是 循环 ，replace () 束 是 蔡 换 ， 不 要 担心 执行 replace () 的 时 候 字 符 串 突然 增加 了 ! 很 多 人 束 
是 用 这 种 思 足 学 习 CSS 的 ， 导 致 很 快 残 遇 到 了 天 人 花 板 。 为 什么 呢 ? 这 是 因为 ， 在 CSS 的 世界 里 ， 
页 面 上 的 任何 看 似 简单 的 呈现 都 是 由 许 许多 多 CSS 属性 共同 作用 的 结果 。 例 如 ， 对 于 一 个 图 卢 浮 
动 ， 单 纯 认 为 只 有 float 在 工作 是 不 全 面 的 ， 实 际 上 ， 行 高 、 字 体 、 鼠 标 手 形 等 都 在 暗地里 “ 搞 
导 ”， 此 时 如 果 仪 仅 套 用 一 两 个 CSS 属性 值 应 有 的 表现 来 理解 ， 是 根本 理解 不 了 的 。 换 句 话说 ， 
有 些 人 的 CSS 水 平 之 所 以 停滞 不 前 ， 是 因为 他 们 没有 把 所 有 的 CSS 当 作 一 个 整体 ， 放 在 一 个 完 
整 的 世界 中 去 看 待 。 所 以 ， 没 有 比 “ 学 CSS 看 看 CSS 中 文 手册 束 够 了 ”更 轴 短 的 言论 了 ， 手 册 
仅仅 是 表层 的 、 独 立 的 一 些 特 性 ， 每 个 CSS 属性 在 CSS 世界 中 都 是 有 其 存在 的 原因 的 ， 都 是 和 
其 他 多 个 CSS 属性 发 生 痢 和 干 丝 万 缕 的 关系 的 ， 这 背后 的 种 种 远 比 他 们 想象 得 要 庞大 很 多 。 

而 本 书 完 完全 全 区 别 于 传统 教条 式 的 手册 或 参考 书 或 教程 之 类 ， 一 步 一 步 市 领 谈 者 接触 真 
正 丰 富 多 彩 、 妙 趣 横生 的 CSS 世界 , 一 番 畅 快 自在 的 CSS 世界 之 旅 下 来 , 读者 一 定 会 得 到 不 一 
样 的 “洗礼 ” 困扰 多 年 的 CSS 成 长 租 贷 说 不 定 束 会 不 知 不 营地 突破 了 。 
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如 何 正确 认识 本 书 


首先 ， 大 家 务必 明确 这 一 点 ， 那 束 是 本 书 的 所 有 内 容 部 是 我 个 人 的 理解 。 没 错 ， 是 人 的 理 
解 ， 不 古 干巴 巴 的 文档 。 这 些 理解 是 我 日 己 多 年 持之以恒 对 CSS 研究 和 思考 后 ， 经 过 个 人 情感 
润 饰 和 认 知 提炼 加 工 的 产物 , 完全 是 我 日 己 所 理解 和 认识 的 CSS 世界 , 可 能 是 不 具有 权威 性 的 。 
写 这 本 书 主要 是 希望 通过 分 享 自己 的 心得 给 对 CSS 感 兴趣 的 各 个 领域 的 人 以 启迪 ,引发 其 思考 ， 
或 者 使 其 有 不 一 样 的 感悟 。 

从 男 一 方面 讲 , 本 书 正 是 因为 其 内 容 都 是 经 过 人 这 个 个 体 的 加 工 ,， 并 融入 了 情感 化 的 思维 ， 
才能 做 到 有 的 放 天 、 通 俗 易 懂 。 我 们 大 多 数 人 部 是 感性 的 ， 看 伤感 电影 会 只， 看 综 乞 市 目 会 突 。 
所 以 , 与 干巴 巴 的 教条 式 的 技术 书籍 相 比 ， 本 书 的 表达 方式 和 语言 风格 更 能 给 入 以 心灵 的 局 迪 。 
读 完 之 后 ， 读 者 可 能 会 有 这 样 的 想法 : 要 是 所 有 的 技术 书 痢 这 么 写 束 好 了 。 

为 外 ， 本 书 不 是 拉 术 文档 ， 也 不 是 参考 手册 ， 因 此 知识 后 不 会 面面俱到 ， 也 就 是 说 ， 不 
少 CSS 相关 的 内 容 我 会 忽略 ， 例 如 ， 选 择 兹 这 一 部 分 最 多 提 一 下 。 同 时 ， 为 了 保证 书 的 内 容 
足够 简练 ， 简 单 的 CSS 语法 和 常规 的 使 用 在 本 书 中 基本 上 不 会 提 及 ， 只 会 重点 分 析 在 其 他 地 
方 看 个 到 的 内 容 。 


配 丛 网 站 


我 专门 为 本 书 制作 了 一 个 网 站 (http://www.cssworld.cn)， 在 这 个 配套 网 站 读者 可 以 了 解 更 
多 关于 本 书 或 者 我 个 人 的 一 些 信息 。 

最 后 ， 由 于 很 多 内 容 都 是 个 人 理解 ， 难 免 会 有 不 准确 或 者 让 大 家 产生 怀疑 的 地 方 ， 欢 迎 去 
官方 论坛 http://bbs.cssworld.cn/ 对 应 版 块 进行 提问 或 反馈。 
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要 深入 理解 一 个 事物 之 前 ， 最 好 和 匈 对 其 整体 有 个 大 概 了 解 ， 这 样 才 不 至 于 划 测 管 颖 。 如 果 
把 CSS 比 作 一 座 大 山 ， 则 我 们 对 整体 的 认 知 就 好 比 知道 这 座 山 的 位 置 、 山 势 、 道 路 状况 等 ， 这 
样 ， 当 我 们 深入 其 中 的 时 候 ， 束 不 容易 迷路 ， 不 会 做 出 错误 的 决策 。 

例如 ， 对 CSS 这 门 语言 特性 的 描述 瓯 有 助 于 对 CSS 的 整体 认 知 。 上 其 体 表 现 为 : 擅长 C++ 
或 者 Java 之 类 的 程序 员 学 习 CSS 往往 没有 如 鱼 得 水 的 感觉 ， 其 背后 的 原因 是 ， 典 型 的 计算 机 开 
发 语言 看 重 馆 辑 思维 和 抽象 能 力 ， 但 是 CSS 这 门 语言 本 身 并 无 轴 辑 可 言 ， 看 重 的 是 特性 间 的 相 
互联 系 和 具象 能 

其 象 往往 以 情感 为 纽 币 ， 无 意识 不 目 沉 产生， 是 非常 感性 的 一 种 能 力 ， 这 往往 是 偏 理性 的 
程序 员 所 不 擅长 的 。 在 某 些 程 序 员 眼 中 ，CSS 属性 就 是 干巴 巴 的 属性 ， 无 法 建 并 类似“ 人 与 人 
关系 ”这 种 很 情感 化 的 联系 ， 于 是 学 习 CSS 总 是 只 得 其 形 、 不 得 其 艇 。 

当然 ， 认 知 可 以 从 多 个 角度 进行 。 例 如 ， 接 下 来 要 介绍 的 CSS“ 世 界 观 ”以 及 CSS 的 历史 
改 事 ， 可 以 让 我 们 多 种 角度 同时 进行 认 知 ， 对 CSS 这 门 语言 的 理解 更 为 准确 和 丰满 。 


LIL CSS 世界 的 “ 世 价 观 ” 
































一 套 完 整 的 体系 。 在 CSS 这 个 世界 中 ，CSS 并 不 是 一 个 机 械 顶 燥 的 语言 ， 所 有 属性 都 十 有 血 有 
肉 、 有 痢 不 同 个 性 和 吴 世 的 个 体 。 不 同 的 个 体 可 以 碰撞 出 不 同 的 火 伦 ， 激 沪 出 卉 彩 纷呈 的 故事 。 


这 里 ， 我 们 不 妨 “ 脑 洞 大 开 ” 一 下 : 如 果 把 CSS 世界 担 成 动漫 的 话 ， 会 是 什么 样子 ? 

站 和 完 ， 动 漫 名 可 以 叫 作 《建筑 神 域 >;，， 讲 述 一 群 建筑 魔法 师 为 国家 存亡 惊 心 动 映 战斗 的 
故事 。 然 后 ， 出 现 了 “Chrome 王国 ”的 几 位 建筑 麻 法 师 日 党 训练 的 画面 。 只 见 名 为 width 
的 魔法 师 手 持 名 叫 选 择 器 的 法 器 ， 准 确 指 向 称 为 <qiv> 的 最 普通 的 块 状 建筑 魔法 石 ， 口 中 念 

















0 
原来 的 一 半 。 然 而 ，widqth 却 锁 由 摇头 ， 口 中 喃 喃 念 道 :“1 坚 秒 ， 还 不 够 快 ， 还 要 再 练 ， 不 
然 在 和 “IE 王国 ”的 战斗 中 很 难 占 得 先 机 !”( 如 图 1-1 所 示 )。 


层 虱 天星 ， 幻化 有 形 ,50% , 变 ! 


<div> 魔法 石 | 


<div> 魔 法 石 





1-1 CSS 世界 观 示 意 1 


此 时 ，wiaqth 突然 发 现 前 面 1 米 之 处 有 一 块 <span> 之 石 ， 具有 class="test" 的 特殊 
立即 拿 出 法 器 ， 念 道 :“ 类 名 之 石 ，test 为 名 ， 为 我 选择 ， 出 !” 话 音 刚 落 ，<span> 

石 蓝 色 荧 光一 内， 明 眼 人 都 能 看 出 来 ，wiaqth 魔法 师 和 <span> 魔 法 石 现 在 处 于 契约 状态 。 
width 继续 念 道 :“ 层 又 天 星 ， 幻 化 有 形 ，50%， 变 !” 但 <span> 魔 法 石 却 没 有 任何 变化 ， 
此 时 width 最 自己 的 脑门 , 似乎 明白 了 什么 , 转 过 头 对 劳 边 的 display 魔法 师 大 声 叫 道 : 
DE 1 辣 风 辣 丽 4 

rsplay 下 屁 颠 屁 帜 跑 过 来 :“ 咱 啦 ? ” 

WT I ， 你 帮 我 重 塑 一 下 。” 

“小 问题 ! 正好 ， 魔法 师 技 人 人 el 

“ 哟 ， 不 错 啊 ， 快 让 我 上 本 上 己 

















1.2 ”世界 都 是 创造 出 来 的 3 


“好 嘲 ! 只 见 display 拿 出 目 己 的 法 右 ， 念 站 :“ 类 名 之 石 ，test 为 名 ， 为 我 选择 ， 
由 呈 案 楼 者 二 层 登 天 星 导 为 化 有 形 间 flex 1” 
只 听见 一 声 清脆 的 “ 嘻 ” 在 两 人 的 合作 之 下 ，<span> 魔 法 石 宽度 也 变化 了 《如 图 1-2 所 示 )。 


<span> 魔 法 石 | .. 
ms Sa 





图 1-2 CSS 世界 观 示 意 2 


“ 哟 ， 很 酷 嘛 !”width 对 display 坚 着 大 拇指 称赞 道 。 
只 见 display 采 腹 一 舌 ， 小 手 在 面前 轻 轻 一 挥 :“ 就 算 你 这 么 伟 我 ， 人 家 也 不 会 开心 的 


从 上 面 的 描述 可 以 看 出 ， 在 CSS 世界 中 ，HTML 是 魔法 石 ， 选 择 器 就 是 选择 法 器 ，CSS 属性 就 
是 魔法 师 ，CSS 各 种 属性 值 就 是 魔法 师 的 魔法 技能 ， 浏 览 器 就 是 他 们 所 在 的 “王国 ”%“ 王 国 ” 会 不 断 
更 新 法 律 法 规 (版 本 升级 )， 决 定 是 否 人 允许 使 用 新 的 魔法 石 CHTMLS 新 标签 新 属性 )， 是 否 允 许 新 的 
魔法 师 入 “国籍 ”(CSS3 新 属性 )， 或 者 允许 魔法 师 使 用 某 些 新 技能 〈CSS 新 的 属性 值 )， 以 及 是 否 
径 某 些 魔法 技能 (如 gdisplay :run-in); 操作 系统 就 是 他 们 所 在 的 世界 ， 不 同 的 操作 系统 代表 不 
同 的 平行 世界 ， 所 以 ，CSS 世界 有 这 人 么 几 个 比较 大 的 平行 世界 ， 即 Windows 世界 、OS X 世界 以 及 移 
动 问 的 1OS 世界 和 Android 世界 。 不 同 世界 的 浏览 器 王国 的 命运 不 一 样 ， 例 如 ， 在 OS X 世界 中 ， 正 
王国 是 不 存在 的 ， 而 Safari 王国 却 异常 强大 ， 但 在 Windows 世界 中 ，Safari 王国 却 异常 沙 宽 。 

以 上 这 一 切 就 构成 了 完整 的 CSS 世界 的 “世界 观 ”。 

下 面 回 答 一 个 很 重要 的 问题 : 为何 要 这 样 认 识 CSS 世界 呢 ? 

首先 ， 将 抽象 的 CSS 直接 和 具体 的 现实 世界 相对 应 ， 更 加 易于 理解 。 试 想 一 下 ， 对 于 普通 
人 ,理解 魔法 师 和 魔法 石 是 不 是 要 比 理解 CSS 代码 容易 得 多 ?其 次 ， 以 完整 的 体系 来 学 习 CSS 
要 比 单纯 关注 属性 值 理解 得 更 加 深刻 ， 可 以 培养 从 宏观 层面 认识 与 理解 CSS 的 习惯 。 再 次 ， 这 
也 方便 我 们 记忆 ， 枯 燥 的 代码 总 是 过 目 就 筷 ， 鲜 活 的 角色 总 是 印象 深刻 。 最 后 ， 这 样 也 可 以 让 
本 书 散发 出 与 众 不 同 的 气质 。 


L2 世 界 部 是 创 运 出 来 的 


世界 都 是 创造 出 来 的 。 很 目 然 ，CSS 世界 也 是 一 点 一 点 创造 出 来 的 。 这 世间 上 的 事情 只 要 
发 生 了 ， 都 是 有 原因 的 。CSS 世界 的 出 现 也 不 例外 。 
下 面 我 们 就 来 看 一 下 CSS 世界 出 现 的 历史 。 虽 然 我 知道 , 有 些 人 对 这 些 历史 可 能 不 感 兴趣 ， 







































































但 是 要 想 深入 理解 CSS 属性 的 一 些 设计 原因 、 表 现 原 理 还 真 离 不 开 当 时 的 历史 环境 。 

大 家 可 能 都 听 说 过 马云 1995 年 去 美国 ， 第 一 次 接触 了 互联 网 ， 在 这 个 时 间 点 ，HTML 才 
是 第 一 版 且 诞 生 没 几 年 W3C 才刚 刚 成 立 , CSS 还 没 出 现 。 那 时 候 的 互联 网 几乎 都 是 文字 信息 ， 
显示 一 张 图 片 都 是 要 上 天 的 感 党 。 

大 家 可 能 没 意 识 到 ， 那 个 时 候 前 端的 上 友 展 和 现在 一 样 快 ， 设 计 师 要 求 越 来 越 多 ，HTML 也 
越 来 越 庞 杂 。 急 需要 其 他 专门 负责 样式 的 语言 ， 据 说 当时 有 几 个 样式 表 语 言 ， 最 后 是 CSS 胜出 
了 ， 为 什么 呢 ? 它 的 胜出 靠 的 是 “ 层 登 ”特性 。 

CSS 全 称 是 Cascading Style Sheets， 翻 译 成 中 文 承 是 “ 层 登 样式 表 ”。 上 所 谓 “ 层 登 "， 顾 名 
思 义 ,就 是 样式 可 以 层 层 轩 加， 比方 说 页 面 元 素 都 继承 了 12 像素 的 大 小 ， 某 标题 就 可 以 设置 成 
14 像 系 进 行 厨 加。 发现 没 ? 这 种 层 车 案 上 略 对 于 样式 的 显示 是 相当 的 灵活 。 

于 是 ， 从 1996 年 12 月 17 日 CSS1 诞生 后 ，CSS 在 样式 呈现 领域 可 谓 所 向 披 靡 ， 没 有 遇 到 任 
何 竞 争 对 手 。1998 年 5 月 12 日 CSS2 有 发布， 推行 内 容 和 表现 分 离 ， 表 格 〈table) 布局 开始 落 寓 。 

1998 年 腾讯 、 新 浪 和 网 易 成 立 ， 当 时 搜狐 则 成 并 1 年 不 到 。 那 个 时 候 是 门户 的 时 代 ， 人 们 
更 关注 的 是 信息 的 获取 ， 所 以 网 站 的 功能 主要 就 是 信息 展示 ， 信 息 是 什么 ?在 那个 时 代 ， 在 互 
联网 领域 ， 信 息 就 是 图 片 和 文字 。 换 名 话说 ， 那 时 候 的 网 站 前 端 技术 关心 的 是 网 片 和 文字 的 呈 
现 ， 而 CSS2 (包括 9 年 之 后 ， 也 就 是 2007 年 才 出 现 的 CSS2.1) 都 是 为 图 文 展 示 服 务 的 。 

我 再 重复 一 退 : CSS 世界 的 诞生 就 是 为 图 文 信息 展示 服务 的 。 这 人 句 话 在 本 书 中 会 非常 频繁 
地 出 现 ， 知 道 这 一 点 你 就 会 明日 很 多 事情 。 

好 ， 下 面 让 我 们 回 到 本 节 开 头 的 那 句 话 一 一 “世界 都 是 创造 出 来 的 ”1 为 何 我 要 反复 强调 
这 人 句 话 呢 ? 如 果 站 在 造物 主 的 角度 去 思考 CSS 世界 的 种 种 表现 ， 很 多 问题 就 会 迎刃而解 。 

现在 给 你 机 会 当 一 回 造物 主 ， 让 你 自己 重新 构建 一 个 CSS 世界 ， 唯 一 的 要 求 承 是 ， 这 个 世 
界 要 非常 便于 图 片 和 文字 的 呈现 ， 你 会 去 如 何 构建 呢 ? 


1L3 CSS 完胜 SVG 的 武 可 一 一 流 




































































在 2003 年 1 月 ，SVG 1.1 被 确立 为 W3C 标准 。 你 没 看 错 ， 是 2003 年 。 要 知道 ，CSS 2.1 
是 2007 年 才 发 布 的 。 考 虑 到 SVG 开始 火 起 来 是 最 近 几 年 ， 也 就 是 差不多 10 年 的 时 间 ，SVG 
都 默默 无 闻 ， 鲜 有 人 问津 ， 到 底 是 怎么 回 事 呢 ? 

很 多 人 认为 SVG 的 竞争 对 手 是 Flasn。 对 ， 是 竞争 对 手 。 但 是 ， 现 在 看 来 ，SVG 显然 要 比 
Flash 优秀 很 多 ，SVG 开放 、 标 准 ， 和 CSS 和 JavaScript 都 能 很 方便 地 进行 交互 ， 如 果 单 纯 SVG 
和 Flash 比 ， 难 说 谁 胜 谁 负 。 在 我 看 来 ， 造 成 SVG 被 冷落 10 年 的 原因 不 是 别 的 ， 正 是 看 似 毫 
不 相关 的 CSS，SVG 是 被 CSS 给 打败 的 。 

正如 上 面 提 到 的 , 在 很 长 一 段 时 间 里 , 网 站 的 主要 功能 都 是 图 片 和 文字 信息 的 展示 , 但 是 ， 
SVG 的 强项 是 图 形 ， 其 文字 内 容 的 呈现 实在 不 敢 恭维 。 举 个 例子 , 在 CSS 中 写 上 一 段 文 字 ， 这 
段 文 字 会 日 然 换行 、 多 行 显 示 ， 于 是 ， 可 以 像 书本 一 样 阅读 ; 但 是 ， 在 SVG 中 ， 文 字 要 目 动 折 
行 ,， 感觉 有 点 儿 赶 鸭子 上 架 一 一 强人 所 难 。 人 家 一 看 ，SVG 连 基 本 的 文字 排版 都 做 不 好 ， 要 SVG 
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何 用 ? 于 是 ，SVG 被 “ 打 入 冷 言 ” CSS 一 如 既往 被 重用 。 

但 是 ， 如 今 技术 得 到 了 发 展 ，Web 呈现 更 加 复杂 和 让 宣 多 彩 ， 图 文 显示 仪 仪 是 网 页 功能 的 
一 部 分 ， 于 是 ， 矢 量 且 图 形 领域 颇 有 造 讶 的 SVG 开始 迎 来 了 自己 的 第 一 春 。 

不 知 大 家 有 没有 思考 过 这 样 的 问题 : 为 什么 CSS 世界 的 图 文 显示 能 力 那 么 强 ? 为 什么 它 可 
以 抑制 SVG 这 么 多 年 ? 

答案 就 是 : 流 ! 


1.3.1 何 为 “ 流 ” 


了 


和 CSS 有 过 杀 密 接触 的 人 一 定 听 过 “文档 流 ” 这 个 概念 ， 我 个 人 总 是 习惯 把 “文档 ”二 字 
去 挥 ， 直接 称 为 “ 流 ”( 纯 粹 个 人 爱好 ， 因 为 够 简 涪 )。 听 过 它 的 人 很 多 , 但 是 , 深入 思考 过 “ 何 
为 法?” 这 个 问题 的 人 怕 是 就 没 这 么 多 了 。 

那 完 竟 CSS 世界 中 的 “ 流 ” 指 的 是 什么 昵 ? “ 流 ” 实 际 上 是 CSS 世界 中 的 一 种 基本 的 定 
位 和 布局 机 制 ， 可 以 理解 为 现实 世界 的 一 套 物理 规则 ,“ 流 ” 跟 现 实 世 界 的 “水 流 ” 有 异曲同工 
的 表现 。 

现实 世界 中 ， 如 果 我 们 让 水 流入 一 个 容 右 ， 水 面 一 定 是 平整 的 ， 我 们 在 水 里 面 放 入 物体 ， 









































这 些 现象 我 们 都 会 认为 是 理所当然 的 ， 因 为 这 就 是 我 们 从 小 接触 的 一 套 物 理 规则 。 我 们 知道 这 
套 规 则 ， 就 可 以 理解 现象 ， 并 且 预 知 现象 。 例 如 ， 水 量 超过 容器 的 容积 很 多 ， 我 们 就 可 以 预测 
到 水 会 溢出 来 。 

感谢 物理 学 ， 它 让 我 们 理解 CSS 世界 的 “ 流 ” 就 轻松 多 了 。CSS 所 界 的 “ 流 ” 似 乎 就 是 按 
照 物理 世界 的 “水 流 ” 创 造 的 。 

CSS 世界 构建 的 基石 是 HTML, 而 HTML 最 具 代 表 的 两 个 基石 <div> 和 <span> 正 好 是 CSS 
世界 中 块 级 元 素 和 内 联 级 元 素 的 代表 ， 它 们 对 应 的 正 是 图 1-3 所 示 的 盛 水 容器 中 的 水 和 木头 ， 
其 特性 表现 也 正如 现实 世界 的 水 和 木头 ， 如 图 1-4 所 示 。 


水 流 会 自动 铺 满 容器 放 入 木头 ， 水 位 升 高 ， 木 头 依次 排列 





图 1-3 流 
div 自 动 铺 满 容器 图 片 文字 依次 排列 ， 不 足 则 换行 


人 
1-4 CSS 世界 构建 的 基石 HTML 
所 以 ， 所 谓 “ 流 ” 就 是 CSS 世界 中 引导 元 素 排 列 和 定位 的 一 条 看 不 见 的 “水 流 ”。 








1.3.2 流 是 如 何 影响 整个 CSS 世界 的 


在 CSS2.1 时 代 ， 我 们 直接 称 CSS 为 “ 流 的 世界 ”真是 一 点 儿 也 不 为 过 ， 整 个 CSS 世界 几 
乎 就 是 围绕 “ 流 ” 来 建立 的 ， 那 么 流 是 如 何 影响 整个 CSS 世界 的 呢 ? 

(1) 擒 贼 先 擒 王 。 因 为 CSS 世界 的 基石 是 HTML, 所 以 只 要 让 HTML 默认 的 表现 符合 “流风 
那么 整个 CSS 世界 就 可 以 被 “ 流 ” 统 治 ， 而 事实 就 是 如 此 ! 

(2) 特殊 布局 与 流 的 破坏 。 如 果 全 部 都 是 以 默认 的 “ 流 ” 来 渲染 ， 我 们 只 能 实现 类 似 W3C 
那样 的 文档 网 页 ， 但 是 ， 实 际 的 网 页 是 有 很 多 复杂 的 布局 的 ， 怎 么 办 ? 可 以 通过 破坏 “ 流 ” 来 
实现 特殊 布局 。 实 际 上 ， 还 是 和 “ 流 ” 打 交道 。 

(3) 流向 的 改变 。 默 认 的 流 回 是 “一 江 春 水 同 东 流 ” 以 及 “ 飞 流 直下 三 千 尺 ” 然而 ， 这 
种 流 同 我 们 是 可 以 改变 的 ， 可 以 让 CSS 的 展现 更 为 丰富 。 因 此 ,“ 文 档 流 从 左 往 右 自 上 而 下 ” 
这 种 说 法 是 不 严谨 的 ， 大 家 一 定 要 纠正 过 来 。 

好 了 ， 下 面 我 想 反 问 大 家 : 如 果 你 是 造物 主 ， 你 会 想到 设计 “ 流 ” 这 套 机 制 来 实现 强大 的 






































图 文 排列 功能 吗 ? 
好 好 想 一 想 ……… 是 不 是 觉得 目前 CSS 的 设计 还 是 很 有 智慧 的 ? 如 果 你 来 重新 设计 CSS, 实 


现 图 文 排列 ， 你 是 否 还 有 其 他 的 设计 思路 ， 比 方 说 “ 杀 缘 机 制 ” 之 类 ? 
适当 地 反问 这 些 问题 ， 通 过 逆 癌 思维， 会 让 我 们 对 CSS 世界 有 另外 一 个 角度 的 认识 。 


1.3.3 ”什么 是 流体 布局 


所 谓 “ 流 体 布局 ”， 指 的 是 利用 元 素 “ 流 ” 的 特性 实现 的 各 类 布局 效果 。 因 为 “ 流 ” 本 身 
具有 自 适应 特性 ， 所 以 “流体 布局 ”往往 都 是 具有 自 适应 性 的 。 但 是 ,“ 流 体 布局 ”并 不 等 同 于 
“ 自 适应 布局 ”。“ 自 适应 布局 ”是 对 凡是 具有 自 适应 特性 的 一 类 布局 的 统称 ,“ 流 体 布局 ”要 次 
窄 得 多 。 例如 , 表格 布局 也 可 以 设置 为 100% 自 适应 , 但 表格 和 “ 流 ” 不 是 一 路 的 , 并 不 属于 “ 流 
体 布局 ”。 

CSS 中 最 常用 的 魔法 石 ， 也 就 是 最 常 使 用 的 HTML 标签 ， 是 <div>， 而 <div> 是 典型 的 
具有 “ 流 ”特性 的 元 素 ， 因 此 ， 曾 经 风靡 的 “div+CSS 布局 ” 实际 上 指 的 就 是 这 里 的 “流体 
布局 ”。 


1L4 CSS 世界 的 开局 从 1E8 开 始 


本 书 书 名 为 《CSS 世界 》 这 里 的 “世界 ” 特 指 的 是 CSS2.1 的 世界 ， 并 不 包括 CSS3，CSS3 
的 世界 更 为 庞杂 和 宏大 ,但 CSS2.1 的 世界 已 经 足够 我 们 畅游 很 多 年 了 。 现 在 前 端 技 术 发 展 迅 独 ， 
加 上 氛围 略 显 浮躁 ， 有 必要 让 广大 前 端 开 用 人 员 静 下 心 来 认识 CSS2.1 的 世界 ， 奋 则 面 对 CSS3 
的 真正 到 来 ， 只 能 是 浅水 游 尺 、 搬 砖 打杂 。 

对 CSS2.1 的 全 面 支持 是 从 微软 公司 的 IE8 开始 的 , 因此 ， 本 书 中 几乎 所 有 特性 、 行 为 表现 
都 是 针对 IE8 以 上 浏览 器 的 。 
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15 table 上 自己 的 此 寞 


如 采 我 没 记 错 的 话 ，<table> 比 CSS 还 要 老 ， 也 就 是 CSS 正式 诞生 之 前 ，<tablLe> 隐 已 
经 出 现 了 。 前 面 提 到 了 “ 流 影响 了 整个 CSS 世界 ”其 中 并 不 包括 <table>。<table> 有 着 目 
己 的 世界 ,“ 流 ”的 特性 对 <table> 并 不 适用 ， 一 些 CSS 属性 的 表现 ， 如 单元 格 的 
vertical-align， 也 和 普 退 的 元 系 不 一 样 。 

虽然 CSS2.1 加 强 了 和 和 <table> 的 联系 ， 如 对 table 类 别 的 display 属性 值 的 支持 等 ， 
但 是 本 书 并 不 会 对 <table> 进 行 专门 的 介绍 ， 因 为 毕竟 不 是 同一 个 世界 的 。 


1L6 CSS 新 世界 一 一 CSS3 


时 代 在 变迁 ， 科 技 在 发 展 ， 人 们 对 互联 网 的 需求 也 在 变化 ， 以 前 的 以 图 文 展示 为 主 的 门户 
网 站 已 经 无 法 满足 用 户 的 需求 。 技术 总 是 随 关 需求 及 展 的， 正如 10 年 前 的 图 文 展 示 需 求 缔造 了 
CSS 世界 一 样 ， 如 今 的 移动 互联 网 以 及 人 硬件 有 发展 也 市 动 CSS 进入 了 新 的 世界 。 

(1) 布局 更 为 丰富 。 

。 移动 器 的 崛起 ， 催 生 了 CSS3 媒介 查询 以 及 许多 响应 式 布局 特性 的 出 现 ， 如 图 片 元 系 

的 srcset 属性 、CSS 的 obpject-fit 属性 。 

e。 弹性 盒子 布局 (flexible box layout) 终于 效 出 了 头 。 

。 格 枯 布局 (grid layout) 姗 姗 来 迟 。 

(2) 视觉 表现 长 足 进步 。 

。 圆 角 、 阴 影 和 渐变 让 元 素 更 有 质感 。 

。 transform 变换 让 元 素 有 更 多 可 能 。 

。 filter 滤 镜 和 混合 模式 让 Web 轻松 变 成 在 线 的 Photoshop:; 

。 animation 让 动画 变 得 非 第 简单 。 

上 面 提 到 的 全 部 都 是 CSS3 的 新 属性 。 因 为 CSS3 的 设计 初衷 是 为 了 实现 更 丰富 、 更 复杂 
的 网 页 ， 所 以 基本 上 和 “ 流 ” 的 关系 并 不 大 。 可 以 说 ,， 和 CSS2 相 比 CSS3 束 古 一 个 全 新 的 世界 ， 
更 加 丰富 ， 更 加 规范 ， 更 加 体系 化 ， 也 更 加 复杂 。 考 虑 到 CSS3 尚未 完全 成 型 ， 且 目 己 尚未 有 
足够 深入 的 研究 ， 无 法 同时 罗 驭 太 复 杂 的 内 容 ， 因 此 ， 本 书 不 会 深入 CSS3 的 知识 点 。 



























































2.1 务必 了 解 的 CSS 世界 的 专业 术语 


尽管 本 书 内 容 会 用 很 轻松 的 方式 表达 ， 但 还 是 避免 不 了 会 出 现 一 些 CSS 领域 的 专业 术语 。 
因此 ， 在 学 习 技 术 内 容 之 前 ， 我 们 需要 先 了 解 一 下 CSS 世界 里 的 一 些 专业 术语 。 
首先 ， 假 设 我 们 现在 有 如 下 一 段 常 见 的 CSS 代码 : 








.Vocabulary { 
height: 99px; 
Color: transparent; 


} 
Te 一 引出 其 涉及 的 专业 术语 。 
， 属性 

0 CSS 的 中 文 称谓 。 例 如 ， 上 面 示 意 CSS ss 

height 和 color 就 是 属性 。 当 我 们 聊天 或 者 分 享 时 说 起 CSS 的 时 候 ， 路 里 冒 出 来 的 都 是 “这 
个 元 素 高 度 99 像素 ”， 或 者 “这 个 文字 颜色 透明 ”对 吧 ? 这 里 提 到 的 “高 度 ” 和 “ 闫 色 ” i 

CSS 世界 的 属性 ， 感 觉 有 点 儿 像 现实 世界 里 人 的 姓氏 。 

2. 值 

“ 值 ” 大 多 与 数字 挂钩 。 例 如 ， 上 面 的 99px 就 是 典型 的 值 。 在 CSS 世界 中 ， 值 的 分 类 非 
第 广 泛 ， 下 面 是 一 些 冲 用 的 类 型 。 

。 ”整数 值 ， 如 z-inqex:1 中 的 1， 属 于 <integer>， 同 时 也 属于 <number>。 

e。 数值 ， 如 1line-height:1.5 中 的 1.5， 属 于 <number>。 

。 上 白 分 比值 ， 如 pagdding:50%$ 中 的 50$， 属 于 <percent>。 

。 长 度 值 ， 如 99px。 

。 闫 色 值 ， 如 #999。 
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此 外 ， 还 有 字符 串 值 、 位 置 值 等 类 型 。 在 CSS3 新 世界 中 ， 还 有 角度 值 、 频 率 值 、 时 间 值 
等 类 型 ， 这 里 就 不 全 部 展示 了 。 

3. 天 键 字 

顾名思义 ， 关 键 字 指 的 是 CSS 里 面 很 关键 的 单词 ， 这 里 的 单词 特 指 英文 单词 ，abc 是 单词 
吗 ? 不 是 , 因此 , 如 果 CSS 中 出 现 它 , 一 定 不 是 关键 字 。 上 面 示例 CSS 代码 中 的 transparent 
束 是 典型 的 关键 字 ， 还 有 和 常见 的 solid、inherit 等 都 是 关键 字 ， 其 中 ijnnerit 也 称 作 “ 泛 
关键 字 ”， 所 谓 泛 关 键 字 ， 可 以 理解 为 “公交 车 关键 字 ”， 就 是 “所 有 CSS 属性 都 可 以 使 用 的 关 
键 字 ” 的 意思 。 

4. 变量 

CSS 中 目前 可 以 称 为 变量 的 比较 有 限 ，CSS3 中 的 currentColor 就 [四 | 
是 变量 ， 非 常 有 用 。 不 过 ， 这 属于 《CSS 新 世界 》 的 内 容 ， 本 书 不 会 详细 
前 述 , 有 兴趣 的 读者 可 以 访问 http://www.zhangxinxu.com/wordpress/?p=4385 
或 者 扫 右 侧 的 二 维 码 ， 做 简单 的 了 解 。 

5. 长 度 单位 I 

CSS 中 的 单位 有 时 间 单 位 (如 s、ms )， 还 有 角度 单位 (如 deg、rad 等 )， 但 最 津 见 的 自 
然 还 是 长 度 单位 《如 px、em 等 )。 需 要 注意 的 是 ， 诸 如 2s 后 面 的 百 分 号 % 不 是 长 度 单 位 。 再 说 
一 过 ，s$ 不 是 长 度 单位 ! 因为 28 就 是 一 个 完整 的 值 ， 就 是 一 个 整体 ， 我 想 你 一 定 认为 0.02 是 
值 ， 没 错 ，2$ 也 同样 是 值 。 

有 人 可 能 会 有 疑问 ， 我 就 认为 $ 是 单位 ， 有 什么 关系 ， 页 面 还 是 长 那样 ， 有 必要 这 么 较真 吗 ? 

问 的 很 在 理 ， 如 果 大 家 平时 没有 看 原始 文档 的 习惯 ， 没 必要 较真 ， 知 道 怎么 使 用 就 好 了 。 
但 是 ， 如 果 经 党 去 MDN 或 W3C 看 一 些 CSS 技术 文档 ， 搞 清楚 概念 ， 看 文档 的 时 候 就 不 容易 
犯 迷 糊 ， 束 不 会 看 不 懂 具 体 说 些 什 么 ， 尤 其 都 是 瑞 文 的 时 候 。 

可 能 有 人 会 有 疑问 ,“ 值 ”那里 提 到 的 <Llength>, 豚 似 和 这 里 的 “长 度 单 位 ”比较 暧昧 啊 ? 
好 眼力 ! 没 错 ， 确 实 暧昧 ， 但 暧昧 是 不 好 的 ， 我 们 必须 把 它们 之 间 的 关系 搞 清 楚 。 一 句 话 : 

<number> + 长 度 单位 = <length> 

如 采 继 续 细 分 ， 长 度 单位 又 可 以 分 为 相对 长 度 单 位 和 绝对 长 度 单位 。 

(1) 相对 长 度 单 位 。 相 对 长 度 单 位 又 分 为 相对 字体 长 度 单 位 和 相对 视 区 长 度 单 位 。 

。 相对 字体 长 度 单 位 ， 如 em 和 ex， 还 有 CSS3 新 世界 的 rem 和 ch 〈 字 符 0 的 宽度 )。 

。 ”相对 视 区 长 度 单 位 ， 如 vn、vw、vmin 和 vmax。 

(2) 绝对 长 度 单 位 : 最 常见 的 就 是 px， 还 有 pt、cm、mm、pc 等 了 解 一 下 就 可 以 ， 在 我 
看 来 ， 它 们 实用 性 近乎 零 ， 至 少 我 这 么 多 年 一 次 都 没 用 过 。 

6. 功能 符 

值 以 函数 的 形式 指定 《就 是 被 括号 括 起 来 的 那 种 )， 主 要 用 来 表示 斋 色 (rgba 和 hsl1a)、 
背景 图 片 地 址 (url)、 元 素 属 性 值 、 计 算 (calc) 和 过 渡 效 果 等 ， 如 rgba(0,0,0,.5)、 
url('css-world.png')、 attr('href') 和 scale (-1)。 
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7. 属性 值 

属性 冒号 后 面 的 所 有 内 容 统一 称 为 属性 值 。 例 如 ，1pPx solid rgb (0,0,0) 就 可 以 称 为 
属性 值 , 它 是 由 “ 值 + 关键 字 + 功 能 符 ” 构 成 的 。 属 性 值 也 可 以 由 单一 内 容 构成 。 例 如 ，z-index:1 
的 1 也 是 属性 值 。 

8. 声明 

属性 名 加 上 属性 值 就 是 声明 ， 例 如 : 


color: transparent;}; 


9. 声明 块 
声明 块 是 花 括号 〈{} ) 包 正 的 一 系列 声明 ， 例 如 : 


{ 
height: 99px; 

















Color: transparent; 


| 


10. 规则 或 规则 集 
出 现 了 选择 器 ,而 且 后 面 还 跟着 声明 块 ， 比 如 本 小 节 一 开始 的 那个 例子 ,就 是 一 个 规则 集 : 





.Vocabulary { 
height: 99px; 
Color: transparent; 


} 

11. 选择 器 

选择 器 是 用 来 瞄准 目标 元 素 的 东西 ， 例 如 ， 上 面 的 .vocabulary 就 是 一 个 选择 器 。 

。 类 选择 器 : 指 以 .这 个 点 号 开头 的 选择 器 。 很 多 元 素 可 以 应 用 同一 个 类 选择 器 类” 
天 生 束 是 被 公用 的 命 。 

ID 选择 器 :“#” 打 头 ， 权 重 相当 高 。ID 一 般 指 向 唯一 元 素 。 但 是 ， 在 CSS 中 ，ID 
样式 出 现在 多 个 不 同 的 元 素 上 并 不 会 只 演 染 第 一 个 ， 而 是 雨露 均 沾 。 但 显然 不 推荐 
这 么 做 。 

。 属性 选择 器 : 指 含有 [] 的 选择 器 ， 形 如 [title]{}、[title= "css-world"]{}、 
[title~="css—-world"]{}、 [title^= "css-world"]{} 和 各 [title$="css- 
WOELOn] {Tr 

。 伪 类 选择 器 : 一 般 指 前 面 有 个 观 文 冒号 (: ) 的 选择 堪 ,， 如 :first-childqd 或 :last- 
Hild 下 

e。 人 擅 元 率 选 择 器 : 就 是 有 连续 两 个 冒号 的 选择 器 ， 如 ::first-line::first- 
Et WbEFOre 和 lsat Een 

12. 关系 选择 器 

关系 选择 右 足 指 根据 与 其 他 元 系 的 天 系 选择 元 素 的 选择 器 ， 和 营 见 的 符号 有 空格 、>、~， 还 

有 + 和 等， 这些 都 是 非常 第 用 的 选择 名 。 
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。 后 代 选 择 器 : 选择 所 有 合乎 规则 的 后 代 元 素 。 空 格 连 接 。 

。 相 邻 后 代 选 择 器 : 仪 仅 选 择 合乎 规则 的 儿子 元 素 ， 孙子、 章 孙 元 素 忽 略 ， 因 此 又 称 “ 子 
选择 器 ”。> 连 接 。 适 用 于 IE7 以 上 版 本 。 

。 兄 第 选择 器 : 选择 当前 元 素 后 面 的 所 有 合乎 规则 的 兄弟 元 素 。~ 连 接 。 适 用 于 IE7 以 上 
版 本 。 

。 相 邻 兄弟 选择 器 : 仅仅 选择 当前 元 素 相 邻 的 那个 合乎 规则 的 兄弟 元 素 。+ 连 接 。 适 用 于 
IE7 以 上 版 本 。 

13. @ 规 则 

@ 规 则 指 的 是 以 @ 字 符 开始 的 一 些 规则 , 像 Qqmedia、@font-face、Q@page 或 者 @support， 

诸如 此 类 。 
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当 某 个 浏览 器 中 出 现 与 其 他 浏览 器 不 一 样 的 行为 或 样式 表现 的 时 候 ， 我 们 总 会 习惯 把 这 种 
不 一 样 的 表现 认为 是 浏览 右 的 bug。 但 在 CSS 世界 ， 这 种 认识 是 狭 阶 的 。 

在 现实 世界 中 ， 有 法 律 来 约束 我 们 的 行为 ， 如 果 越 界 ， 就 称 为 违法 ; 同样 地 ， 在 CSS 世界 
里 ， 有 Web 标准 来 约束 元 了 素 的 行为 ， 如 有 果 越 界 ， 就 称 为 bug。 但 是 ， 法 律 总 是 人 制定 的 ， 世 间 
万 象 是 不 可 能 面面俱到 的 ， 会 存在 法 律 空 昌 ;同样 地 ，Web 应 用 场景 干 变 万 化 ，Web 标准 也 是 
不 可 能 面面俱到 的 ， 也 会 存在 规范 描述 以 外 的 场景 ， 此 时 ， 各 大 浏览 器 厂家 只 能 根据 自己 的 理 
解 与 喜好 去 实现 ， 一 旦 个 性 化 就 会 出 现 差 异 ， 束 会 遇 到 “火狐 火狐 ， 你 怎么 啦 ? 平时 表现 挺 好 
的 ， 今 天 怎么 补正 带 坏 了 ? ”的 情景 。 实际 上 ， 此 时 过 到 的 表现 差异 并 不 是 浏览 器 的 bug， 用 
计算 机 领域 的 专业 术语 摘 述 应 该 是 “未 定义 行为 ”(undefined behavior)。 

下 面 我 们 来 看 一 个 “未 定义 行为 ”的 例子 。 

CSS 世界 中 有 很 多 伪 类 ， 其 中 一 个 比较 肖 用 的 束 是 :active， 在 IE8 及 以 上 版 本 的 浏览 圳 行为 
表现 非常 统一 ， 文 持 非 焦点 元 素 *"， 鼠 标 按 下 ， 执 行 :active 伪 类 对 应 的 CSS 样式 ， 鼠 标 抬 起 还 原 。 

通用 情况 下 ，: active 的 表现 都 是 符合 预期 的 ,但 是 ， 当 遭遇 其 他 一 些 处 理 的 时 候 ， 事情 
束 会 变 得 不 一 样 ， 上 共 体 指 什么 处 理 呢 ? 

假设 我 们 现在 有 一 个 <a> 标 签 模拟 的 按钮 ，CSS 如 下 : 
























































a:active { background-color: red; |} 


假设 此 按钮 的 DOM 对 象 变 量 名 为 putton，jJavaScript 代码 如 下 : 





button.addEventListener ("mousedown", function (event) { 


// 此 处 省 略 N 行 


Q@ 像 <a>、<button> 这 样 的 元 素 ， 当 我 们 使 用 键盘 进行 Tab 键 切换 的 时 候 ， 是 可 以 被 focus 的 ， 表 现 为 虚 框 或 
者 外 发 光 ， 这 类 元 素 称 为 “焦点 元 素 ” 非 焦点 元 素 指 没有 设置 tapindex 属性 的 <div>、 <span> 等 普通 元 
素 。 在 IE6/IE7 浏览 右 下 ， 非 焦点 元 素 对 :active 置 硬 净 团 。 
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event .preventDefault (); 


}); 

也 就 是 鼠标 按 下 的 时 候 ， 阻 止 按钮 的 默认 行为 ， 这 样 设置 可 以 让 拖 动 效 末 更 流畅 。 

看 似 平 痰 无 奇 的 一 段 代 码 ， 最 后 却 发 生 了 意 想 不 到 的 情况 Firefox 浏览 器 的 :active 阵 
尼 了 ， 鼠 标 按 下 去 没有 UI 变化 ， 按 钮 背景 没有 变 红 ! 其 他 所 有 浏览 器 ， 如 正和 Chrome 浏览 
器 ，:active 正常 变 红 ， 符 合 预期 。 

眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/2/2-1.php 或 者 扫 下 面 的 二 维 码 。 图 2-1 左 图 所 
示 为 目标 效果 ， 石 图 所 示 是 Firefox 浏览 器 中 的 效果 。 








包 舍 5 : 


包含 1$ : 


Ca 


图 2-1 Firefox 浏览 器 :active 的 作用 效果 








这 里 ，Firefox 和 IE/Chrome 浏览 器 表现 不 一 样 ， 这 是 Firefox 浏览 句 的 bug 吗 ? 这 可 不 是 
bug， 而 是 因为 规范 上 并 没有 对 这 种 场景 的 具体 描述 ， 所 以 Firefox 认为 :active 发 生 在 
mousedown 事件 之 后 ， 你 也 不 能 说 它 什 么 ， 对 吧 ? 

像 这 种 规范 顾及 不 到 的 细 校 末节 的 实现 ， 就 称 为 “未 定义 行为 ”。 


第 3 章 
流 、 元 又 与 基本 尺寸 





第 1 章 提 过 了 ,“ 流 ”之 所 以 影响 了 整个 CSS 世界 ， 就 是 因为 影响 了 CSS 世界 的 基石 HTML。 
那 共 体 是 如 何 影响 的 呢 ? 

HTML 常见 的 标签 有 <div>、<p>、<1i> 和 <table> 以 及 <span>、<img>、<strong> 
和 <em> 等 。 虽 然 标 签 种 类 繁多 ,但 通常 我 们 就 把 它们 分 为 两 类 : 块 级 元 素 (block-level element) 
和 内 联 元 素 (inline element)。 

注意 ， 如 果 按 照 W3C 的 CSS 规范 区 分 ， 这 里 应 该 分 为 “ 块 级 元 系 ” 和 “内 联 级 元 又” 
(inline-level element)。 但 是 ， 在 W3C 的 HTML4 规范 中 ， 已 经 明确 把 HTML 元 系 分 成 了 
“ 块 级 元 素 ” 和 “内 联 元 素 ”， 没 错 ， 是 “内 联 元 素 ” 而 不 是 “内 联 级 元 素 ”。 两 个 规范 对 
似 有 微小 的 冲突 。 本 书 中 所 采用 的 是 “内 联 元 素 ” 这 种 称谓 ， 原 因 有 两 点 : 第 一 ， 这 种 称 
谓 更 杀 切 、 更 自然 ， 因 为 大 家 平时 都 是 这 么 叫 的 ; 第 二 ， 使 用 “内 联 元 素 ” 这 个 称谓 对 我 
们 深入 理解 与 内 联 相关 的 概念 并 没有 什么 影响 。 考 虑 到 本 书 的 目的 不 是 为 CSS 规范 做 科 
普 ， 而 是 以 通俗 易 异 方 式 展示 CSS 的 精彩 世界 ， 所 以 ， 采 用 了 更 老 一 点 的 HIML 规范 中 
的 叫 法 。 


3.1 块 级 元 素 


“ 块 级 元 素 ” 对 应 的 英文 是 block-level element, 常见 的 块 级 元 素 有 <div>、<1i> 和 <table> 
等 。 需 要 注意 是 ,“ 块 级 元 素 ” 和 “display 为 block 的 元 素 ” 不 是 一 个 概念 。 例 如 ，<1i> 元 
素 默 认 的 display 值 是 1ist-item，<table> 元 素 默 认 的 display 值 是 table, 但 是 它们 
均 是 “ 块 级 元 素 ”， 因 为 它们 都 符合 块 级 元 素 的 基本 特征 ， 也 就 是 一 个 水 平流 上 只 能 单独 显示 一 
个 元 素 ， 多 个 块 级 元 素 则 换行 显示 。 

下 是 由 于 “ 块 级 元 素 ” 具 有 换行 特性 ， 因 此 理论 上 它 都 可 以 配合 clear 属性 来 清除 浮动 
市 来 的 影响 。 例 如 
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.Clear:after { 
Content: ''，} 
display: table; // 也 可 以 是 block， 或 者 是 list-item 
clear: both; 


} 


手动 输入 http://demo.cssworld.cn/3/1-1.php 或 者 扫 右 侧 的 二 维 码 。 
从 容器 的 背景 色 高 度 变化 我 们 可 以 看 出 清除 的 效果 ， 如 图 3-1 所 示 。 


a 


请 选择 靖 除 浮动 的 方法 : 














请 选择 清除 浮动 的 方法 : 


.Clear:after 
{ .Clear:after { 
Content : 
content: . 


display: | 请 选择 ”"，; | 
clear: both ; 本 一 


clear: both ; 














图 3-1 容器 的 背景 色 高 度 变 化 的 效果 


实际 开发 时 ， 我 们 要 么 使 用 plock， 要 么 使 用 
table， 并 不 会 使 用 1ist-item， 主 要 有 3 个 原因 。 

(1) 1 个 字符 的 比较 多 ， 其 他 都 是 5 个 字符 。 

(2) 会 出 现 不 需要 的 项 目 符号 ， 如 图 3-2 第 头 所 示 。 
这 其 实 并 不 是 什么 大 问题 ， 再 加 一 行 list-style: 








none 声明 就 可 以 了 。 \ 
(3) IE 浏览 器 不 支持 伪 元 素 的 display 值 为 list- 说 ， 
item。 这 是 不 使 用 aisplay:1List-item 清除 浮动 的 证 放下。 
主因 ， 兼 容 性 不 好 。 对 于 下 浏览 器 〈 包 括 了 下 11)， 普 通 元 mr 
系 设 置 display:list-item 有 效 ， 但 是 :before content: ，…; 
/ :after 伪 元 素 束 不行 。 4 


clear: both ; 





下 面 是 提问 环节 了 。 请 问 ， 为 什么 正 浏览 器 不 文 持 } 
伪 元 素 的 display 值 为 1ist-item 呢 ? 
其 实 这 个 问题 的 答案 可 以 从 下 面 这 个 问题 中 找到 线 
索 : 请 问 ， 为 什么 设置 display:1ist-item， 元 素 会 出 现 项 目 符号 ? 





3-2 ”出 现 项 目 符 号 
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3.1.1 为 什么 list-item 元 素 会 出 现 项 目 符号 


在 CSS 世界 中 ， 很 多 看 似 “ 理 所 当然 ”的 现象 的 背后 ， 实 际 上 可 能 有 一 整套 的 体系 文 撑 。 
分 据 简 蛙 现 象 背 后 的 原因 ， 会 让 你 学 到 很 多 别人 很 难 学 到 的 CSS 技能 和 知识 。 

回 到 这 个 问题 。 此 问题 本 号 并 不 难 ， 但 是 ， 问 题 所 能 延伸 出 来 的 东西 就 要 吓 到 诸位 了 。 此 
问题 牵扯 到 CSS 世界 中 各 种 盒子 。 

由 于 罕 扯 名 词 其 多 ， 所 以 我 尽量 以 通俗 易 懂 的 方式 给 大 家 解释 。 

创造 CSS 的 造物 主 原 本 的 想法 很 简单 : 我 要 创造 一 个 世界 ， 就 像 只 有 男性 和 女性 一 样 ， 这 
个 世界 只 有 块 级 盒子 block-level box) 和 内 联 盒子 〈inline box)。 块 级 盒子 就 负责 结构 ， 内 联 
盒子 就 负 贡 内容。 事 非 经 过 不 知 难 ， 造 物 主 后 来 才 发 现 ， 这 世界 不 止 有 男性 和 女性 ， 还 有 特殊 
的 性 别 ，CSS 世界 的 盒子 也 是 这 样 。 

原本 以 为 块 级 盒子 一 套 就 够 用 了 ， 也 就 是 所 有 “ 块 级 元 素 ” 就 只 有 一 个 “ 块 级 盒子 ”， 但 
是 ， 半 路 杀 出 个 1ist-item， 其 默认 要 显示 项 目 符号 的 ， 一 个 盒子 解释 不 了 ， 怎 么 办 ? 

束 跟 我 们 写 JavaScript 组 件 遇 到 新 功能 增加 API 一 样 ， 天 神灵 机 一 动 : 我 给 1ist-item 
再 重新 命名 一 个 盒子 ， 就 叫 “ 附 加 盒子 ”。 好 了 ， 这 下 顺 了 ， 上 所 有 的 “ 块 级 元 素 ” 都 有 一 个 “ 主 
块 级 盒子 ”，1List-itenm 除 此 之 外 还 有 一 个 “附加 盒子 ”。 

现在 大 家 知道 上 面 问题 的 答案 了 吧 ! 之 所 以 1ist-itenm 元 素 会 出 现 项 目 符号 是 因为 生成 
了 一 个 附加 的 盒子 ， 学 名 “标记 盒子 ”(Cmarker box)， 专 门 用 来 放 圆 点 、 数 字 这 些 项 目 符号 。 正 
浏览 句 下 伪 元 素 不 文 持 1ist-item 或 许 就 是 无 法 创建 这 个 “标记 盒子 ”导致 的 。 

但 是 ， 我 们 的 故事 还 没 结 束 。 搞 定 了 1ist-item， 天 神 本 以 为 可 以 安安 心心 睡 个 午觉 ， 
结果 磁 到 了 真正 的 特殊 性 别 的 display:inline-block 元 素 。 

宇 着 inline 的 及 藏 着 block 的 心 ， 现 有 的 几 个 盒子 根本 没 法 解释 啊 ， 怎 么 办 ? 

造物 主 再 次 灵机 一 动 ， 没 错 ， 你 猜 对 了 ， 双 新 增 一 个 盒子 ， 也 就 是 每 个 元 素 都 两 个 盒子 ， 
外 在 盒子 "和 内 在 盒子 。 外 在 盒子 负责 元 素 是 可 以 一 行 显示 ,还 是 只 能 换行 显示 ; 内 在 盒子 负责 
党 山 、 内 容 呈 现 什 么 的 。 但 是 呢 ， 造 物 主 又 想 了 想 ， 叫 “内 在 盒子 ”虽然 容易 理解 ， 但 是 未 免 
有 些 俗气 ， 难 登 大 雅之 笔 ， 于 是 ， 又 想 了 一 个 更 专业 的 名 称 ， 叫 作 “ 容 圳 盒子 ”。 

于 是 , 按照 display 的 属性 值 不 同 , 值 为 block 的 元 素 的 盒子 实际 由 外 在 的 “ 块 级 盒子 ” 
和 内 在 的 “ 块 级 容器 盒子 ”组 成 ， 值 为 inline-block 的 元 素 则 由 外 在 的 “内 联 盒子 ”和 内 
在 的 “ 块 级 容器 盒子 ”组 成 ， 值 为 inline 的 元 素 则 内 外 均 是 “内 联 盒子 ” 

现在 ,大 家 应 该 明 白 为 何 qisplavy 属性 值 是 ijnline-block 的 元 素 既 能 和 图 文 一 行 显 示 ， 
又 能 直接 设置 wiqathheignht 了 吧 ! 因为 有 两 个 合子， 外 面 的 盒子 是 inline 级 别 ， 里 面 的 盒 
子 是 block 级 别 。 

实际 上 ， 如 果 遵 循 这 种 理解 ，display :block 应 该 脑 补 成 display:block-block， 
















































































Q) “外 在 盒子 ”除了 inline-pblock， 还 有 run-in， 但 Chrome 已 经 放弃 对 run-in 的 支持 有 一 段 时 间 了 ， 因 此 ， 
本 书 不 对 其 做 分 析 。 
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display :table 应 该 脑 补 成 display:block-table， 我 们 平时 的 写法 实际 上 是 一 种 简写 。 
好 了 , 说 了 这 么 多 , 出 个 小 题 测试 一 下 大 家 的 学 习 成 果 。 请问: display:inline-table 
的 盒子 是 怎样 组 成 的 ? 


3.1.2 display:inline-table 的 盒子 是 怎样 组 成 的 


这 个 问题 应 该 无 压力 : 外 面 是 “内 联 盒子 ” 里 面 是 “table 盒子 ”。 得 到 的 就 是 一 个 可 以 和 
文字 在 一 行 中 显示 的 表格 。 
可 以 和 文字 在 一 行 中 显示 的 表格 ? 没 错 ， 为 了 证 明 我 没 忽悠 大 家 ,我 特意 做 了 个 演示 页 
面 ， 涯 示 页 面 中 <qiv> 元 系 的 相关 CSS 代码 如 下 : 
.inline-table ({ 
display: inline-table; 
width: 128px; 
margin—-left: 10px; 


border: lpx solid #cad5eb; 
} 


手动 输入 http://demo.cssworld.cn/3/1-2.php 或 者 扫 下 和 面 的 二 维 码 。 结 果 该 元 系 和 文学 一 行 
显示 ， 且 行为 表现 如 同 真正 的 表格 元 素 〈 子 元 素 宽 度 等 分 )， 如 网 3-3 所 示 。 














和 文字 平 起 王 坐 的 表 稿 : 第 ] 列 ”第 2 列 





图 3-3 ”表格 元 素 和 文字 在 一 行 显 示 





上 面 示意 的 CSS 代码 表面 上 看 起 来 很 简单 ， 但 是 ， 我 也 说 过 ， 简 单 的 背后 往往 是 不 简单 。 
这 里 CSS 中 有 个 wigqth:128px， 从 最 终 的 效果 来 看 ， 宽 度 设置 是 起 作用 了 。 如 果 我 们 使 用 
display:inline-block 也 会 是 同样 的 宽度 表现 。 下 面 问题 来 了 : 元 素 都 有 内 外 两 个 盒子 ， 
我 们 平常 设置 的 widtn/heignt 属性 是 作用 在 哪个 盒子 上 的 ? 


3.1.3 width/height 作用 在 哪个 盒子 上 


这 个 问题 也 是 很 简单 的 ， 因 为 在 解释 内 外 盒子 的 时 候 束 已 经 提 到 过 了 : 是 内 在 盒子， 也 束 
是 
不 知 大 家 有 没有 进一步 深入 思考 过 : width 或 neight 作用 的 具体 细节 是 什么 呢 ? 


3.2 width/heignt 作用 的 具体 细节 


因为 块 级 元 系 的 流体 特性 主要 体现 在 水 平方 回 上 ， 所 以 我 们 这 里 先 看 重 讨 论 width。 
估计 很 多 人 的 第 一 次 CSS 属性 书写 束 献 给 了 wigqth， 就 像 路 边 的 小 草 ， 好 常见 、 好 平淡 、 
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好 简单 的 样子 。 如 果 你 有 这 样 的 想法 ， 此 书 你 就 买 对 了 。 
3.2.1 深 天 不 露 的 width:auto 


我 们 应 该 都 知道 ，width 的 默认 值 是 auto。auto 因为 是 默认 值 ， 所 以 出 镜 率 不 高 ， 但 
是 ， 它 却 是 个 深 藏 不 露 的 家 伙 ， 它 至 少 包 含 了 以 下 4 种 不 同 的 宽度 表现 。 

(1) 充分 利用 可 用 空间 。 比 方 说 ，<dqiv>、<p> 这 些 元 素 的 宽度 默认 是 100% 于 父 级 容器 的 。 
这 种 充分 利用 可 用 空间 的 行为 还 有 个 专 有 名 字 ， 叫 作 fil1-available， 大 家 了 解 即 可 。 

(2) 收缩 与 包 囊 。 典 型 代表 就 是 浮动 、 绝 对 定位 、inline-block 元 素 或 table 元 素 ， 
英文 称 为 shrink-to-fit， 直 译 为 “收缩 到 合适 ” 有 那么 点 儿 意 思 ， 但 不 够 形象 ， 我 一 直 把 这 种 现 
象 称 为 “ 包 囊 性 ”CSS3 中 的 fit-content 指 的 就 是 这 种 宽度 表现 。 

(3) 收缩 到 最 小 。 这 个 最 容易 出 现在 table-layout 为 auto 的 表格 中 ， 想 必 有 经 验 的 
人 一 定 见 过 图 3-4 所 示 的 这 样 一 柱 擎 天 的 盛况 吧 ! 

眼见 为 实 ， 有 兴趣 的 读者 可 以 手动 输入 http://demo.cssworld.cn/3/2-1.php 或 者 扫 下 面 的 二 维 码 。 




















就 
| 
列 
就 当 父 级 relat 公有 级 relativ 
本 父 级 re ative ， 且 当 父 级 relative ， 且 
帘 度 很 小 的 时 候 ， 例 | 宽度 很 小 的 时 候 ， 例 
列 | ， 立 
如 如 
{position:relative; {position:relative; 
列 width:20px;} ， width:20px'} ， 
就 absolute 元 素 也 会 absolute 元 素 也 会 
出 现 一 柱 擎 天 的 情 。 | 出 现 一 柱 擎 天 的 情 
| > 
就 
1 
列 





图 3-4 单元 格 中 的 一 柱 擎 天 效果 

当 每 一 列 空间 都 不 够 的 时 候 ， 文 字 能 断 就 断 ， 但 中 文 是 随便 断 的 ， 身 文 单词 不 能 断 。 于 是 ， 
第 一 列 被 无 情 地 每 个 字 都 断 挥 ,形成 一 柱 擎 天 。 这 种 行为 在 规范 中 被 揪 述 为 “preferred minimum 
width” 或 者 “minimum content width”。 后 来 还 有 了 一 个 更 加 好 听 的 名 字 min-content。 

(4) 超出 容器 限制 。 除 非 有 明确 的 wiqth 相关 设置 ， 否 则 上 面 3 种 情况 尺寸 都 不 会 主动 
超过 父 级 容器 宽度 的 ， 但 是 存在 一 些 特殊 情况 。 例 如 ， 内 容 很 长 的 连续 的 瑞 文 和 数字 ， 或 者 内 联 
元 系 被 设置 了 white-space:nowrap， 则 表现 为 “恰似 一 江 春 水 同 东 流 ， 流 到 断崖 也 不 回头 ”。 

例如 ， 看 一 下 下 面 的 CSS 代码 : 


.father { 
width: 150px; 
background-color: #cd0000; 
white—-space: nowrap; 

} 

.Child { 
display: inline-block; 
background-color: #f0f3f9; 

} 3-5 ”文字 超出 容 右 也 不 换行 示意 












怡 如 一 江 春 水 向 东 流 ， 流 到 断崖 也 不 回头 
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这 上 段 代 人 码 的 结果 如 图 3-5 所 示 。 
子 元 素 既 保持 了 inline-block 元 系 的 收缩 特性 ， 又 同时 让 内 容 宽度 最 大 ， 直 接 无 视 父 








眼见 为 实 ， 知 有 兴趣 ， 可 以 手动 输入 http:/demo.cssworld.cn/3/2-2.php 
或 扫 右 侧 的 二 维 码 杀 自 感受 一 下 。 
上 面 列 举 的 4 点 束 是 wigdth:auto 在 不 同 场景 下 的 宽度 表现 的 简介 。 








文 写 作 “Intrinsic Sizing”， 表 示 尺 寸 由 内 部 元 又 决定 ;还 有 一 类 叫 作 “外 部 斥 寸 ”>， 英 文 写 作 
“Extrinsic Sizing”， 宽度 由 外 部 元 素 决 定 。 现 在 ， 考 考 大 家 : 上 面 4 种 尺寸 表现 ， 哪 个 是 “外 部 
尺寸 ”? 哪个 是 “内 部 尺寸 ”? 

这 里 就 不 卖 天 子 了 。 就 第 一 个 ， 也 束 是 <qaiv> 默 认 宽 度 100% 显 示 ， 是 “外 部 尺寸 ” 其 余 
全 部 是 “内 部 尺寸 ”而 这 唯一 的 “外 部 尺寸 ”是 “法 ”的 精髓 所 在 。 

1. 外 部 尺寸 与 流体 特性 

(1) 正常 流 宽度 。 当 我 们 在 一 个 容 右 里 倒 入 足 量 的 水 时 ， 
水 一 定 会 均匀 铺 满 整个 容器 ， 如 图 3-6 所 示 。 


在 页 面 中 随便 扔 一 个 <aiv> 元 素 , 其 尺寸 表现 就 会 和 这 水 流 、 
一 样 铺 满 容器 。 这 就 是 block 容器 的 流 特性 。 这 种 特性 , 所 有 | -一 一 一 
浏览 器 的 表现 都 是 一 臻 的。 因此， 我 就 实在 想 不 通 ， 为 何 那么 多 
网 站 或 同行 会 有 类 似 下 面 的 CSS 写法 。 例 如 ， 一 个 亚 直 导航 。 了 不 古旧 本 和 生生 相生 


a { 





水 流 会 自动 铺 满 容器 





display: block; 
width: 100%; 
} 
<a> 元 系 默 认 diplay 是 inline， 有 所以, 设置 display :block 使 其 块 状 化 绝对 没有 问 
题 ， 但 后 面 的 width:100g 就 没有 任何 出 现 的 必要 了 。 
我 很 多 年 前 总 结 过 一 套 “ 兢 三 无 准则 ” 即 “ 无 宽度 , 无 图 片 , 无 浮动 ” 为 何 要 “无 宽度 ”? 
原因 很 简单 ， 表 现 为 “外 部 尺寸 ”的 块 级 元 系 一 旦 设置 了 宽度 ， 泊 动 性 束 琶 失 了 了 。 
所 谓 流 动 性 ， 并 不 是 看 上 去 的 宽度 100$ 显 示 这 么 简单 ， 而 是 一 种 margin/border/padding 
和 content 内 容 区 域 自动 分 配水 平 空 间 的 机 制 。 
我 们 来 看 一 个 简单 的 例子 ， 手 动 输入 http://demo.cssworld.cn/3/2-3.php 加 J 
或 者 扫 右 侧 的 二 维 码 。 这 是 一 个 对 比 演示 〈 见 图 3-7)， 上 下 两 个 导航 均 有 eng ue 



















Cr Le 
Ey | Sa 性 人/ 攻 HT 站 小 Fp pf Ta . 
margin 和 padding， 前 者 无 width 设置 ， 完 全 借助 流 特 性 ， 后 者 宽度 2 ph 中 
中 
width:100%。 结 果 ， 后 者 的 尺寸 超出 了 外 部 的 容器 ， 完 全 束 不 像 “ 水 流 ” “=” 昌 
那样 完全 利用 容器 空间 ， 即 所 谓 的 “流动 性 丢失 ” 
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当然 ， 实 际 开发 的 时 候 ， 是 不 会 设置 宽度 100% 的 ， 毕 葛 有 显示 问题 。 此 时 ， 可 能 有 人 会 
突然 灵光 一 现 , 借助 流动 性 来 实现 …… 要 是 这 样 就 好 了 ， 然 “无 宽度 ， 借 助 流动 性 
而 其 基本 上 采取 的 策略 是 ， 发 挥 目 己 天 才 般 的 计算 能 力 ， 通 
过 “容器 宽度 -水 平 badqing- 水 平 mardin=?” 重 新 设 定 有 具 
体 的 宽度 。 

于 是 ， 最 终 的 CSS 代码 如 下 : 











width:100% 尺寸 超出 


.nav { 
width: 240px; 
} 
.nav-a { 
display: block; 
/* 200px = 240px - 1l10px*2 — 10px*2 */ 
width: 200px; 图 3-7 设 定 宽度 与 流动 性 缺失 


margin: 0 10px; 





padding: 9px lO0px; 


} 


典型 的 “ 砌 砖 涉 ”“ 搭 积木 ” 式 思 维 方式 ! 虽然 说 最 后 的 效果 是 一 样 的 ， 但 是 ， 如 果 模 块 
的 宽度 变化 了 ， 哪 怕 只 变 了 1 像素 ， wigth 也 需要 重新 计算 一 裔 。 但 是 ， 如 果 借 助 流 动 性 无 
览 度 布 局 ， 那 么 孢 筑 外 面容 右 斥 寸 变 化 ， 我 们 的 导航 也 可 以 目 适 应 ， 这 束 是 充分 利用 浏览 右 原 
生 流 特性 的 好 处 。 

因此 ， 记 住 “无 宽度 ”这 条 准则 ， 少 了 代码 ， 少 了 计算 ， 少 了 维护 ， 何 乐 而 不 为 呢 ? 

你 应 该 还 记得 前 面 说 过 display :block 应 该 脑 补 威 aisplay:block-bLlock， 这 是 我 
自己 想 出 来 的 ， 便 于 大 家 理解 ，CSS 世界 其 实 并 没有 这 样 的 说 法 。 虽 有 “ 腾 想 ”成 分 在 里 面 ， 
但 其 实 也 是 有 理 可 循 的 。 本 详细 讲 了 块 级 元 素 的 流体 特性 ， 这 种 特性 就 是 体现 在 里 面 的 “ 容 
髓 盒子 ”上 的 。 所 以 ， 在 CSS3 最 新 的 世界 中 ，CSS 规范 的 撰写 者 们 使 用 了 另外 一 个 名 词 来 表 
示 这 个 内 在 合子， 就 是 “flow”， 也 了 束 是 本 书 的 核心 “ 流 ” 因此 ， display:block 更 规范 的 
脑 补 应 该 是 display:block flow。 注 意 中 间 是 空格 。 当 然 ， 由 于 规范 《〈 理 和 案 ) 2015 年 10 
月 才 及 布 ， 因 此 吾 到 2017 年 6 月 为 止 还 没有 浏览 锅 文 持 。 好 了 ， 这 属于 比 CSS3 新 世界 还 要 新 
的 世界 的 知识 点 ， 了 解 即 可 。 

(2) 格式 化 宽度 。 格 式 化 宽度 仅 出 现在 “绝对 定位 模型 >” 中， 也 就 是 出 现在 position 
属性 值 为 absolute 或 fixed 的 元 系 中 ,在 默认 情况 下 , 绝对 定位 元 素 的 宽度 表现 是 “ 包 
于 性 ”， 冤 度 由 内 部 尺寸 决定 ， 但 是 ， 有 一 种 情况 其 宽度 是 由 外 部 尺寸 决定 的 ， 是 什么 情 
况 呢 ? 

对 于 非 蔡 换 元 素 〈 见 本 书 第 4 章 )， 当 left/top 或 top/bottom 对 立方 位 的 属性 值 同时 
存在 的 时 候 ， 元 系 的 宽度 表现 为 “格式 化 宽度 "， 其 宽度 大 小 相对 于 最 近 的 具有 定位 特性 
(position 属性 值 不 是 static) 的 祖先 元 素 计 算 。 
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例如 ， 下 面 一 段 CSS 代码 : 
div { position: absolute; left: 20px; right: 20px; } 


假设 该 <qiv> 元 又 最 近 的 具有 定位 特性 的 祖先 元 际 的 宽度 是 1000 像 系 , 则 这 个 <qiv> 元 系 的 宽 
度 是 960〈 即 1000-20-20) 像素 。 

此 外 ， 和 上 面 的 普通 流 一 样 “ 格 式 化 宽度 ”具有 完全 的 流体 性 , 也 就 是 margin、border、 
padding 和 content 内 容 区 域 同样 会 自动 分 配水 平 〈 和 垂直 ) 空间 。 

“格式 化 宽度 ”水 很 深 ， 同 时 也 非常 实用 ， 这 里 移 简 单 提 及 ， 更 多 内 容 可 参见 本 书 第 6 草 
与 position:absolute 相关 的 内 容 。 

2. 内 部 尺寸 与 流体 特性 

上 一 节 讲 的 是 “外 部 尺寸 ”>， 本 闻 束 讲 讲 “ 内 部 斥 寸 >。 所 谓 “ 内 部 尺寸 >， 徐 单 来 讲 束 是 
元 又 的 尺寸 由 内 部 的 元 素 决 定 ， 而 非 由 外 部 的 容器 决定 。 如 何 快速 判断 一 个 元 素 使 用 的 是 人 否 
为 “内 部 尺寸 ” 呢 ? 很 简单 ， 假 如 这 个 元 素 里 面 没有 内 容 ， 宽 上 度 就 是 0， 那 就 是 应 用 的 “内 
Rs 

据 我 所 知 ， 在 CSS 世界 中 ,“ 内 部 尺寸 ”有 下 面 3 种 表现 形式 。 

(1) 包 襄 性 。 

“ 包 于 性 ”是 我 自己 对 “shrink-to-fit” 理 解 后 的 一 种 称谓 ， 我 个 人 觉得 非常 形象 好 记 ， 一 直 
用 了 很 多 年 。“ 包 圳 性 ”也 是 CSS 世界 中 很 重要 的 流 布 局 表现 形式 。 

中 文 就 是 博大 精深 顾名思义 ,“ 包 吾 性 ”， 除了“ 包 于 *”， 还 有 “ 目 适 应 性 ”。“ 自 适应 性 ” 
是 区 分 后 面 两 种 尺寸 表现 很 重要 的 一 点 。 那 么 这 个 “上 自 适应 性 ” 指 的 是 什么 呢 ? 

所 谓 “ 目 适应 性 ”， 指 的 是 元 每 尺寸 由 内 部 元 系 决 是， 但 永远 小 于 “包含 块 ” 容 楷 有 的 
尺寸 (除非 容器 尺寸 小 于 元 素 的 “首选 最 小 澳 度 ”)。 换 句 话说 束 古 ,“ 包 于 性 ”元 素 昌 中 
中 有 个 max-wiqdth:100% 单 着 的 感觉 (注意 ， 此 说 法 只 是 便于 大 家 理解 ， 实 际 上 是 有 明 
显 区 别 的 )。 

因此 ， 对 于 一 个 元 素 ， 如 果 其 display 属性 值 是 inline-block， 那 么 即使 其 里 面 内 容 
青 多 ， 只 要 是 正常 文本 ， 于 是 ， 图 文 混 排 的 时 候 ， 我 们 只 要 天 心 内 容 ， 
除非 “首选 最 小 宽度 ” 比 容器 宽度 还 要 大 ， 人 否则 我 们 完全 不 需要 担心 某 个 元 素 内 容 太 多 而 破坏 
了 布局 。 

凡事 发 生 必 有 缘由 。CSS 世界 的 造物 主 为 何 要 设计 “ 包 襄 性 ”这 个 东西 呢 ? 是 为 谁 设 计 
的 呢 ? 

反问 是 探 完 知识 的 很 好 的 习惯 和 方式 。 要 回答 上 面 的 问题 ， 我 们 只 要 请 一 个 野 宾 出 来 ， 

腔 克 基 本 天 不 多 了 。 下 面 我 们 残 请 出 重量 级 舅 宾 一 一 得 名 的 “按钮 ”元 素 。 没 错 ， 就 是 默认 长 
得 比较 丑 ， 样 式 定 义 兼 容 性 义 不 好 的 按钮 元 素 。 
按钮 通常 以 如 下 两 种 形式 出 现在 页 面 代码 中 : 













































































<button> 按 钮 </button> 
<input type="button"” value=" 按 钮 "> 
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按钮 就 是 CSS 世界 中 极 具 代表 性 的 jnline-block 元 素 ， 可 谓 展示 “ 包 庄 性 ”最 好 的 例 
子 ， 有 具体 表现 为 : 按钮 文字 越 多 宽度 越 帘 《内 部 矿 寸 特性 )， 但 如 果 文 字 足 够 多 ， 则 会 在 容 露 的 
宽度 处 自动 换行 (和 目 适应 特性 )。 

按钮 会 目 动 换行 ? 没 错 ， 你 之 所 以 没 印象 ， 可 能 是 因为 : 

。 ”实际 项 目 中 ， 按 钮 上 的 文字 个 数 比 较 有 限 ， 没 机 会 换行 ; 

。 <pbutton> 标 签 按 钮 才 会 自动 换行 ， <input> 标 签 按 钮 ， 默 认 white-space:pre,， 

是 不 会 换行 的 ， 需要 将 pre 值 重 置 为 默认 的 normal。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/2-4.php 或 者 扫 下 面 的 二 维 码 。 上 面 的 示例 页 
面 的 效果 如 图 3-8 所 示 。 











按钮 文字 越 冤 宽度 越 宽 ( 包 囊 ,内 部 尺寸 
特性 ) ， 但 不 会 起 过 容 莫 宽度 ( 自 适 应 
性 ) 





图 3-8 IE11 浏览 器 IE8 模式 下 按钮 换行 效果 








按钮 最 大 宽度 就 是 容 絮 的 240 像素 ，1 像素 不 多 1 像素 不 少 ， 顿 时 有 了 一 种 内 外 兼 修 的 


[已 
el 


“ 包 右 性 ”对 实际 开发 有 什么 作用 呢 ? 

请 看 这 个 需求 : 页 面 某 个 模块 的 文字 内 容 是 动态 的 ， 可 能 是 几 个 字 ， 也 可 能 是 一 句 话 。 然 
后 ， 和 希望 文字 少 的 时 候 居 中 显示 ， 文 字 超 过 一 行 的 时 候 居 左 显示 。 访 如 何 实现 ? 

核心 CSS 代码 如 下 : 




















.box { 
text-align: center; 

} 

.Content { 
display: inline-block; 
text-align: left; 

} 


这 样 ， 文 字 少 的 时 候 ， 就 会 如 图 3-9 所 示 。 文 字 多 的 时 候 ， 如 图 3-10 所 示 。 


国宝 


文字 内 容 -新 增 文 字 - 新 增 文 字 - 新 增 





文字 -新 增 文字 











图 3-9 ”文字 少时 的 显示 效果 图 3-10 ”文字 多 时 的 显示 效果 
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眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/2-5.php 或 者 扫 右 侧 的 二 
维 码 ， 进 入 页 面 点 击 “ 更 多 文字 ”按钮 体验 。 
除了 inline-block 元 素 ,， 浮 动 元 素 以 及 绝对 定位 元 系 都 具有 包 事 性 ， 
均 有 类 似 的 智能 宽度 行为 。 
(2) 首选 最 小 视 度 。 
所 请“ 首选 最 小 宽度 ”， 指 的 是 元 素 最 适合 的 最 小 宽度 。 我 们 接着 上 面 的 例子 ， 在 上 面 例子 
中 , 外 部 容器 的 宽度 是 240 像素 , 假设 宽度 是 0, 请 问 里 面 的 inline-block 元 素 的 宽度 是 多 少 ? 
是 0 吗 ? 不 是 。 在 CSS 世界 中 ,图片 和 文字 的 权重 要 远大 于 布局 ， 因 此 ，CSS 的 设计 者 显 
然 是 不 会 让 图 文 在 width:auto 时 宽度 变 成 0 的 ， 此 时 所 表现 的 宽度 就 是 “首选 最 小 宽度 ”。 
基体 表现 规则 如 下 。 
e。 ”东亚 文字 《如 中 文 ) 最 小 宽度 为 每 个 汉字 的 宽度 ， 
如 图 3-11 所 示 的 14。 
。 西方 文字 最 小 宽度 由 特定 的 连续 的 英文 字符 单元 
决定 。 并 不 是 所 有 的 类 文字 符 都 会 组 成 连续 单元 ， 
一 般 会 终止 于 空格 (普通 空格 )、 短 横 线 、 问 号 以 
及 其 他 非 贡 文字 符 等 。 例如 ,“display:inline- 
block” 这 几 个 字符 以 连接 符 “-” 作 为 分 隔 符 , 形 ”图 3 由 中 文 六子 与 最 小 宽度 效果 
成 了 “display:inline” 和 “block” 两 个 连续 .content | 92.78x48 
单元 ， 由 于 连接 符 “- ”分 隔 位 置 在 字符 后 面 , 因此 ， 
最 后 的 宽度 就 是 “display:inline-” 的 完 度 ， 
如 图 3-12 所 示 。 
如 果 想 让 喘 文 字符 和 中 文 一 样 , 每 一 个 字符 都 用 最 小 宽度 
单元 ， 可 以 试 试 使 用 CSS 中 的 word-break:break-all。 3-12 ”连续 字符 换行 扩 不 总 
。 类 似 图 乒 这 样 的 蔡 换 元 素 的 最 小 宽度 束 是 该 元 素 内 容 本 喘 的 宽度 。 
“首选 最 小 宽度 ”对 我 们 实际 开发 有 什么 作用 呢 ? 
可 以 让 我 们 遇 到 类 似 现象 的 时 候 知 道 原 因 是 什么 ， 方 便 迅 速 对 症 下 药 ， 其 他 残 没 什么 用 了 。 
有 点 失望 ?” 那 好 ， 我 束 举 个 利用 “首选 最 小 宽度 ”构建 图 形 的 例子 吧 。 请 问 ， 如 何 使 用 一 
层 HTML 标签 分 别 实现 图 3-13 所 示 的 “四 ”和 “ 凸 ” 效 来 (注意 要 兼容 IE8) ? 
由 于 要 兼容 IE8，CSS 新 世界 中 图 形 构建 利器 的 盒 阴 影 和 背景 渐变 全 都 没有 用 武之 地 ， 怎 
么 办 呢 ? 我 们 可 以 利用 “首选 最 小 宽度 ”的 行为 特点 把 需要 的 图 形 勺 勒 出 来 。 核 心 CSS 代码 如 
下 《以 “四 ”效果 示意 ): 




































































.ao { 
display: inline-block; 
widthn: 0; 

} 

.ao:bpefore { 


content: "love 你 love"; 
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outline: 2px solid #cd0000; 
color: #f£ff; 





还 没 看 明白 ? 那 我 把 文字 颜色 放出 来 〈 见 图 3-14)， 大 家 应 该 就 知道 实现 原理 了 。 


lowve 5 
中 
lowve 


图 3-13 需要 实现 的 效果 图 图 3-14 图 形 由 文字 区 域 勾勒 而 成 


利用 连续 英文 单词 不 换行 的 特性 ， 我 们 就 可 以 控制 什么 地 方 “ 四 >， 什么 地 方 “ 巴 ” 图 ! 

想 看 在 线 演示 ， 请 手动 输入 http:/demo.cssworld.cn/3/2-6.php 或 者 扫 石 [=] = 上 
便 的 三 维 人 码 。 1 二 

(3) 最 大 宽度 > 

最 大 宽度 束 是 元 素 可 以 有 的 最 大 宽度 。 我 自己 是 这 么 理解 的 ,“ 最 大 宽 
度 ” 实 际 等 同 于 “ 包 囊 性 ”元 素 设置 white-space:nowrap 声明 后 的 宽 
度 。 如 采 内 部 没有 块 级 元 素 或 者 块 级 元 素 没有 设 定 宽 度 值 ， 则 “最 大 宽度 ” 实际 上 是 最 大 的 连 
续 内 联 盒子 的 宽度 。 

什么 是 连续 内 联 盒 子 ? “内 联 盒 子 ” 的 内 容 会 在 3.4 节 深 入 讲解 ， 这 里 你 残 简单 地 将 其 理 
解 为 display 为 inline、inline-block、inline-table 等 元 素 。“ 连 续 内 联 盒 子 ” 指 
的 全 部 都 是 内 联 级 别 的 一 个 或 一 推 元素， 中 间 没 有 任何 的 换行 标签 <br> 或 其 他 块 级 元 双 。 

一 图 胜 千 言 ， 图 3-15 所 示 是 一 段 很 平常 的 HTML 片段 的 “连续 内 联 盒子 ”信息 标注 图 。 

其 中 ， 有 3 处 连续 内 联 例子， 分别 是 : 

。 <br> 前 面 的 4 个 内 联 盒 子 组 合 ; 

。 <br> 后 面 “ 我 是 下 一 行 ” 字 样 押 在 的 匿名 内 联 盒子 ; 

。 最 后 块 状 <p> 标 签 内 的 内 联 盒 子 ， 也 就 是 一 段 文本 。 

与 标注 图 “内 联 ” 文 字 对 应 的 标注 相 一 致 ， 此 时 “最 大 宽度 ”就 是 这 3 个 连续 内 联 盒子 的 
宽度 的 最 大 值 。 

如 果 把 标注 图 的 代码 在 浏览 器 中 运行 一 下 ， 则 在 最 大 宽度 模式 下 ,效果 如 图 3-16 所 示 。 可 
以 友 现 最 后 的 冤 度 就 是 第 一 个 “连续 内 联 盒子 ”的 宽度 。 





















































4 div 
四 联 Ty a 我 二 区 机 
联 一 -一 一 > <5pan» 我 在 ijnline 标 繁 内 </span 由 
9 联 一 一 >> “button; 我 是 按 饥 </button 找 是 文本 我 在 inline 标 签 内 | 我 是 按钮 
向 联 > img SFc=”"shuai,pne” alt=" 我 是 图 月 我 星 下 一 行 
拉杆 一 一 PP > 本 
为 联 一 一 之 “我 是 一 2” -| 我 是 一 段 描述 
门 大 二 > p 归 是 一 段 描述 1 1 ] 隧 
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图 3-15 “连续 内 联 盒子 ”信息 标注 图 图 3-16 最 大 宽度 模式 下 的 效果 
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“最 大 宽度 ”对 我 们 实际 开发 有 什么 作用 呢 ? 

根据 我 这 么 多 年 的 经 验 ， 大 部 分 需要 使 用 “最 大 宽度 ”的 场景 都 可 以 通过 设置 一 个 “很 大 
宽度 ”来 实现 。 注 意 ， 这 里 的 “很 大 宽度 ”和 “最 大 宽度 ”是 有 本 质 区 别 的 。 比 方 说 ， 有 5 张 
图 片 ， 每 张 图 片 宽 度 200 像 系 , 假设 图 片 元 系 紧 密 排 列 ， 则 “最 大 宽度 ”就 是 1000 像 系 。 但 是 ， 
实际 开发 的 时 候 ， 我 们 懒得 计算 ,可 能 直接 设置 容器 width:2000px， 这 里 2000px 就 是 “很 
大 宽度 ”， 宽 度 足 够 大 ， 作 用 是 保证 图 片 不 会 因为 容器 宽度 不 足 而 不 在 一 行内 显示 。 两 者 都 能 实 
现 几 张 图 片 无 右 滑 来 滑 去 的 效 末 。 

那 有 没有 场景 只 能 是 “最 大 宽度 ”而 不 是 “很 大 宽度 ” 呢 ? 有 ! 不 知 大 家 有 没有 上 听 过 icroll， 
它 可 以 实现 非常 平滑 的 滚动 效果 ， 在 前 器 界 顺 有 名 气 。 

一 般 来 讲 ， 实 现 目 定 义 滚 动 有 两 种 原理 : 一 种 借助 原生 的 滚动 ， scrollLeft/scrollTop 
值 变 化 ， 它 的 优点 是 简单 ， 不 足 是 效果 采 板 ;， 男 一 种 是 根据 内 部 元 又 的 尺寸 和 容 右 的 关系 ， 通 
过 修改 内 部 元 系 的 位 置 实现 深 动 效果 ,优点 是 效果 可 以 很 颖 放 。iSeroll 就 是 使 用 的 后 者 ， 因 此 ， 
如 条 我 们 硕 望 使 用 iScroll 模拟 水 平 深 动 ， 只 能 是 使 用 “最 大 宽度 ”这 样 ， 深 动 到 底 的 时 候 才 
是 真 的 到 底 。 

眼见 为 实 ， 手动 输入 http://demo.cssworld.cn/3/2-7.php 或 者 扫 下 面 的 二 维 码 。 保 证 在 一 行 显 
示 ， 同 时 不 浪费 一 点 空白 ， 如 图 3-17 所 示 。 
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海 动 到 和 划 后 








图 3-17 最 大 宽度 与 精确 滚动 示意 


3.2.2 width 值 作用 的 细节 
细心 的 读者 有 没有 友 现 ， 前 面 那么 多 页 ， 其 实 就 讲 了 一 个 点 一 一 width:auto， 说 “ 深 疡 不 
露 ” 不 是 忽悠 你 们 吧 ? 下 面 ， 转 换 思 维 ， 我 们 来 看 一 下 widtn 属性 使 用 具体 数值 会 有 怎样 的 表现 。 
比方 说 ， 对 于 一 个 <div> 元 素 ， 我 们 设 定 其 宽度 为 100px， 如 下 : 
div { width: 1l100px; } 
请 问 ，100px 的 宽度 是 如 何 作 用 到 这 个 <qiv> 元 素 上 的 ? 
要 回答 这 个 问题 ， 就 需要 了 解 CSS 世界 中 与 尺寸 相关 的 一 个 重要 概念 一 一 “ 盒 尺 寸 ”(box 


dimension ) 。 
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前 文 多 次 强调 了 ，widtn 是 作用 在 “内 在 盒子 ”上 的 ， 乍 一 看 是 一 个 普通 的 例子， 实际 上 ， 
这 个 “内 在 盒子 ”是 由 很 多 部 分 构成 的 。 这 个 盒子 的 构成 和 地 球 结构 的 构成 惊人 地 类 似 ， 可 参考 
图 3-18 所 示 的 这 张 我 制作 的 示意 图 (图 中 虚线 、 实 线 是 为 了 区 分 不 同 结构 ， 本 号 并 没有 意义 )。 

CSS 盒 尺寸 区 域 地 球 构造 区 域 




















padding 


content 





图 3-18 ”使 尺 寸 人 金子 结构 和 地 球 结构 对 比 图 

仔细 对 比 会 发 现 ， 两 者 不 仪 结构 类 似 ， 对 应 结构 的 视觉 表现 和 含义 也 类 似 。 比 方 说 ，CSS 
的 margin 区 域 和 地 球 的 大 气 层 区 域 都 是 透明 的 ， 又 比方 说 content 之 于 CSS， 正 如 地 核 之 
于 地 球 ， 都 是 属于 核心 ， 因 为 CSS 世界 的 诞生 就 是 为 图 文 信息 展示 服务 的 ， 因 此 ， 内 容 一 定 是 
最 重要 的 核心 。 然 后 在 这 个 核心 的 外 面包 圳 了 padding、border 和 margin。 

CSS 世界 什么 最 多 ? 盒子 ! 比方 前 面 介 绍 过 的 块 状 盒子 、 内 联 盒子 以 及 外 在 盒 于 和 内 在 盒 
子 ， 以 及 这 里 即将 出 现 的 4 个 盒子 ， 以 及 3.4 市 介绍 的 一 堆 盒 子 。 如 果 这 些 合子 纯 粹 是 概念 ， 
没什么 实际 作用 ， 我 焉 不 讲 或 直接 一 步 带 过 ， 但 是 ， 这 里 的 这 4 个 盒子 不 仅仅 是 概念 ， 还 真 的 
有 付 诸 实践 的 关键 字 ， 所 以 还 是 要 好 好 说 一 说 。 

我 们 的 这 个 “内 在 盒子 ”又 被 分 成 了 4 个 盒子 , 分 别 是 content box、padding box、border box 
和 margin box。 

原本 这 几 个 盒子 只 存在 于 规范 中 ， 我 们 写 代码 的 知 不 知道 无 所 谓 的 ， 都 能 写 出 很 棒 的 CSS 
代码 ， 这 就 和 玩 游 戏 没 必要 知道 游戏 怎么 制作 的 道理 一 样 。 但 是 后 来 ， 这 几 个 盒子 在 CSS 语言 
层 有 名 字 了 ， 一 下 子 变 成 有 身份 的 人 人 了， 事情 就 变 了 ， 如 果 对 这 些 盒子 不 了 解 ， 有 些 CSS 属性 
束 不 好 理解 ， 也 不 容易 记 住 。 

那么 都 给 它们 起 了 些 什 么 名 字 呢 ?content box 写作 content-box，padding box 写作 
padding-box，border box 写作 border-box，margin box 写作 ……- 突然 发 现 ，margin box 居然 
没有 名 字 ! 为 何 唯 独 margin box 并 没有 对 应 的 CSS 关键 字 名 称 呢 ? 因为 目前 没有 任何 场景 
需要 用 到 margin box。 

“margin 的 背景 永远 是 透明 的 ” 因此 不 可 能 作为 packgound-clip 或 background- 
origin 属性 值 出 现 。margin 一 旦 设 定 具 体 宽 上 度 和 高 度 值 ， 其 本 喘 的 斥 寸 是 不 会 因 margin 
值 变化 而 变化 的 ， 因 此 作为 box-sizing 的 属性 值 存在 也 就 没有 了 意义 (这 会 在 后 面 深入 阁 
述 )。 既 然 无 用 武之 地 ， 目 然 就 被 抛弃 了 。 
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现在 回 到 一 开始 的 问题 : wiqth:100px 是 如 何 作 用 到 <div> 元 素 上 的 ? 

在 CSS2.1 的 规范 中 ， 有 一 上 段 非常 露骨 的 描述 :content box 环绕 着 width 和 height 给 定 
的 矩形 。 

说 得 这 么 直 白 , 我 已 经 没什么 其 他 可 说 的 了 。 明摆着 , wigdth:100px 作用 在 了 content box 
上 ， 由 于 <dqiv> 元 素 默认 的 padding、 border 和 margin 都 是 0， 因 此 ,该 <div> 所 呈现 的 
宽度 就 是 100 像素 。 

那么 按照 这 种 说 法 ， 如 果 我 们 在 水 平方 回 给 定 padding 和 border 大 小 ， 则 元 素 的 尺寸 
就 不 是 100 像素 了 ? 我 们 看 一 个 简单 的 例子 : 


div { width: 1l00px; padding: 20px; border: 20px solid; } 


手动 输入 http://demo.cssworld.cn/3/2-8.php 或 者 扫 下 面 的 二 维 码 。 绪 果 变 成 了 180 像素 宽 ， 
如 图 3-19 所 示 。 





此 时 元 素 的 
offsetWidth 


是 :180 





3-19 ”默认 盒 尺 寸 下 的 offsetWidth 


为 什么 会 变 宽 呢 ? 其 实 很 好 理解 ， 因 为 宽度 是 作用 在 content box 上 的 ， 而 外 面 围绕 的 
padding box 和 border box 又 不 是 摆设 ， 上 自然 实际 尺寸 要 比 设 定 的 大 。 这 天 好 比 某 超 模 的 腰围 
61 cm, 于 了 件 东 北大 可 窗 , 目 然 此 时 的 腰围 要 远大 于 61 cm。 | 
如 图 3-20 所 示 ， 中 间 有 点 览 的 就 是 content 区 域 ， 宽 度 
100 像素 , 再 加 上 padding 和 bordet 左右 各 20 像素 , 最 
终 宽度 就 是 180 像素 啦 ! 

如 果 单 看 定义 和 表现 ,似乎 一 切 都 合情合理 ,但 实际 上 ， 
多 年 的 实践 告诉 我 , 有 了 时候, 这 种 宽度 设 定 和 表现 并 不 合理 。 
我 总 结 为 以 下 两 点 。 3-20 ”180 像素 宽度 的 盒 模型 

(1 ) 流动 性 丢失 。 

对 于 块 状元 素 , 如 果 width:auto, 则 元 际会 如 水 流 般 充满 整个 容器 , 而 一 旦 设 定 了 width 
具体 数值 ， 则 元 系 的 流动 性 束 会 被 阻 断 ， 因 为 元 系 给 定 宽度 就 像 河流 中 则 竖 了 两 个 大 闸 一 样 ， 
就 没有 了 流动 性 。 尤 其 宽度 作用 在 content box 上 ， 更 是 内 外 流动 性 全 无 ， 如 图 3-21 所 示 。 

这 世界 上 任何 事物 ， 一 旦 限 死 了 ， 就 丧失 了 有 灵活 性 ， 其 发 展 潜力 及 作用 范围 惑 会 大 大 
受 限 。 

长 江 为 何 生 机 劲 劲 数 千 年 ， 就 是 因为 滔滔 江水 ， 奔 流 不 县 。CSS 的 流动 性 也 是 其 生机 医 动 
之 本 ， 如 条 直接 宽度 设 死 ， 流 动 性 丢失 ， 在 我 看 来 ， 了 驶 是 江河 变 死 水 ， 手 机 变 板 砖 。 这 就 是 我 
提出 “无 宽度 准则 ”的 原因 一 一 布局 会 更 灵活 ， 容 错 性 会 更 强 。 
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width:auto: width:]00px; 


人 ( 


图 3-21 流动 性 缺失 示意 图 

鉴于 “流动 性 丢失 ”在 3.2.1 节 其 实 已 经 提 过 ， 还 有 实例 ， 这 里 就 不 再 过 多 展开 。 

(2 ) 与 现实 世界 表现 不 一 致 的 困扰 。 

包含 padding 或 border 会 让 元 素 宽 度 变 大 的 这 种 CSS 表现 往往 会 让 CSS 使 用 者 困惑 : 
我 设置 宽度 为 100 像素 ， 其 实 是 希望 整个 最 终 的 宽度 是 100 像素 ， 这 样 才 符合 现实 理解 啊 。 比 
方 说 ， 我 买 个 140m 的 房子 ， 肯 定 是 连 墙 体面 积 在 内 的 啊 ， 实 际 使 用 面积 比 140m 小 才 是 现实 ， 
你 说 现在 最 终 面积 比 140m 还 大 ， 这 种 事情 显然 是 不 科学 不 合理 的 。 

或 许 是 因为 CSS 2.1 是 面向 内 容 〈 图 文 信息 ) 设计 的 ， 所 以 ，width 设计 成 了 直接 作用 在 
content box 上 。 

这 对 一 些 CSS 新 手 的 布局 造成 了 一 定 的 障碍 ， 因 为 这 些 CSS 从 业者 眼中 的 CSS 结构 是 砖 
块 ， 而 不 是 水 流 。 因 此 ， 布 局 讲求 尺寸 精确 计算 。 这 就 导致 在 一 些 CSS 属性 值 发 生变 化 的 时 候 
(如 padding 值 变 大 ， 元 素 尺 寸 也 变 大 )， 空 间 不 足 ， 出 现 页 面 布局 错位 的 问题 。 

那 有 没有 什么 办 法 能 避免 这 种 错位 问题 的 出 现 呢 ?方法 之 一 就 是 采用 书写 方式 约束 ， 如 使 

“宽度 分 离 原 则 ” 

3.2.3 CSS 流体 布局 下 的 宽度 分 离 原 则 

所 谓 “ 宽 上 度 分 离 原 则 ” 惑 是 CSS 中 的 wigth 属性 不 与 影响 客 度 的 padding/border (有 
时 候 包 括 margin) 属性 共存 ， 也 就 是 不 能 出 现 以 下 的 组 合 : 

00 borders lpx S6130> } 
或 者 

.box { width: 100px; padding: 20px; } 


有 人 可 能 会 问 : 不 这 么 与 ， 该 怎么 与 呢 ? 很 简单 ， 分 离 ，wiath 独立 占用 一 层 标 签 ， 而 
padding、border、margin 利用 流动 性 在 内 部 目 适 应 呈现 。 
























































.father 1{ 
width: 180px; 

} 

.Son { 
margin: 0 20px; 
padding: 20px; 
border: lpx solid; 
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现在 关键 问题 来 了 : 为 何 要 宽度 分 离 ? 

1. 为 何 要 宽度 分 离 

在 前 响 领域 ， 一 提 到 分 离 ， 作 用 一 定 是 便于 维护 。 比 方 说 ， 样 式 和 行为 分 离 、 前 后 端 分 离 
或 者 这 里 的 “宽度 分 离 ”。 

道理 其 实 很 简单 ， 当 一 件 事情 的 友 展 可 以 被 多 个 因 系 所 左右 的 时 候 ， 这 个 事情 最 终 的 结 
末 就 会 变数 很 大 而 不 可 预期 。 宽 度 在 这 里 也 是 类 似 ， 由 于 盒 太 寸 中 的 4 个 盒子 都 能 影 啊 宽 度 ， 




















自然 页 面 元 系 的 最 终 宽 度 就 很 容易 发 生变 化 而 导致 意 想 不 到 的 布局 发 生 。 例 如 ， 下 面 这 个 简 
单 的 CSS: 
.box { 


width: 1l100px; 
border: lpx solid; 
} 


此 时 宽度 是 102 像 系 。 然 后 ， 设 计 师 希望 元 素 边 框 内 有 20 像素 的 留 日 ， 这 时 候 ， 我 们 会 增加 
padding 设置 : 








.box { 
width: 1l100px; 
padding: 20px; 
border: lpx solid; 
} 


结果 此 时 宽度 变 成 了 142 像素 ， 大 了 40 像素 ， 跟 原来 宽度 差异 明显 ， 显 然 布局 很 容易 出 问题 。 
为 了 不 影响 之 前 的 布局 ， 我 们 还 需要 通过 计算 减 去 40 像素 的 paddqing 大 小 才 行 : 
.box { 


width: 60px; // 通过 计算 ， 减 去 40 像素 
padding: 20px; 























border: lpx solid; 
} 


但 是 ， 如 果 我 们 使 用 了 宽度 分 离 ， 事 情 就 会 轻松 很 多 : 


.father { 
width: 102px; 
} 


.Son { 











border: lpx solid; 
} 


骨 套 一 层 标 签 ， 父 元 素 定 宽 ， 子 元 素 因 为 width 使 用 的 是 默认 值 auto， 所 以 会 如 水 流 般 
目 动 填 满 父 级 容器 。 因 此 ， 子 元 素 的 content box 额度 束 是 100 像素 ， 和 上 和 面 直接 设置 width 
为 100 像 系 表 现 一 样 。 

然后 , 同样 的 故事 ,设计 师 希 望 元 素 边 框 内 有 20 像素 的 留 白 ,这 时 候 , 我们 会 增加 padding 


议 症 : 
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.father { 
width: 102px; 

} 

.Son { 
border: lpx solid; 
padding: 20px; 

} 


然后 …*… 就 没有 然后 了， 宽度 还 是 102 像素 ， 子 元 素 的 content box 上 自动 变 成 了 60 像素 ， 
和 上 面 反 例 的 表现 一 样 。 没 错 ， 目 动 变 化 了 上 ， 就 是 这 么 智能 ! 

虽然 表现 一 样 ， 但 是 写 代 但 的 人 的 体验 却 大 不 一 样 : width、padding、border 混用 的 
时 候 ， 任 何 修改 我 们 都 需要 实时 去 计算 现在 width 应 该 设置 多 大 才能 和 之 前 的 占用 的 宽度 一 
样 ， 而 后 面 width 分 离 的 实现 ， 我 们 没有 任何 计算 ， 要 padding 留 日 ， 加 一 下 瓯 好 ， 要 修改 
边框 宽度 ， 改 一 下 就 好 ， 浏 览 器 会 自动 计算 ， 完 全 不 用 担心 尺寸 的 变化 。 

也 残 是 说 ， 使 用 “宽度 分 离 ” 后 ， 明 们 不 需要 烧 脑 子 去 计算 了 ， 而 且 页 面 结构 反而 更 稳固 。 
这 么 好 的 事情 ， 完 全 没有 理由 拒绝 啊 ! 

2. 可 能 的 挑战 

有 人 可 能 会 提出 挑战 : 你 这 “宽度 分 离 ” 多 使 用 了 一 层 标签 啊 ， 这 HTML 成 本 也 是 
成 本 啊 ! 

没 错 ， 问 题 本 号 是 对 的 。HTML 的 成 本 也 是 成 本 ， 过 深 的 散 套 是 会 增加 页 面 演 染 和 维护 成 
本 的 。 但 是 ， 我 这 里 要 抛 出 一 句 话 ， 实 际 上 ， 如 果 不 考 虑 答 换 元 素 ， 这 世界 上 绝 大 多 数 的 网 页 ， 
只 需要 一 个 width 设 定 就 可 以 了 ， 没 错 ， 只 需要 一 个 width， 融 是 最 外 层 限 制 网 页 主体 内 容 
宽度 的 那个 width， 而 里 面 所 有 元 素 都 没有 理由 再 出 现 width 设置 。 所 以 ,“ 宽 度 分 离 ” 虽 然 
多 了 一 层 标签 ， 但 最 终 也 就 多 了 一 层 标签 而 已 ， 这 个 成 本 跟 收 益 比 起 来 简直 束 是 毛毛 雨 。 

但 是 ， 话 又 说 回来 ,“ 无 宽度 ”网 页 布局 是 需要 很 深 的 CSS 积累 才能 概 驭 目 如 的 ， 很 多 同行 
没 好 好 品 鉴 本 书 的 内 容 ， 要 是 让 他 们 完全 尊 循 “宽度 分 离 ” 来 实现 ， 怕 是 HTML 会 变 得 很 吃 嗪 。 

那 有 没有 什么 既 无 顷 计 算 ， 又 无 须 额 外 藤 套 标签 的 实现 呢 ? 有 ， 那 束 是 可 以 改变 width 
作用 细节 的 box-sizing 属性 。 



















































































3.2.4 改变 width/height 作用 细节 的 box-sizing 


box-sizing 虽然 是 CSS3 属性 ， 但 是 ， 让 人 受 宠 知 恢 的 是 IE8 浏览 器 也 是 文 持 它 的 ， 不 
过 需要 加 -ms- 私 有 前 级 ， 但 IE9 浏览 磺 开 始 了 不 需要 私有 前 级 了 了 。 

本 书 内 容 是 针对 IE8 及 以 上 版 本 浏览 磺 的 , 因此 , box-sizing 也 加 入 了 CSS 世界 魔法 师 
的 队伍 。 

1. box-sizing 的 作用 

box-sizing 顾名思义 就 是 “使 尺 寸 "?。 稍 等 ， 前 文 好 像 也 出 现 了 一 个 “ 盒 尺 寸 ”(box 
dimension), 喷 ? 两 者 是 一 样 的 吗 ? 我 个 人 党 得 是 一 样 的 , 只 是 dimension 这 个 词 太 过 于 官方 了 ， 
用 在 规范 中 很 合适 ， 但 是 ， 要 是 作为 CSS 属性 ， 拼 写 束 不 那么 容易 了 ， 所 以 就 使 用 了 更 口语 化 





30 第 3 章 流 、 元 素 与 基本 尺寸 


的 box-sizind。 

虽然 box-sizing 被 直译 为 “全 尺寸 ” 实际 上 ， 其 更 准确 的 叫 法 应 该 是 “全 尺寸 的 作用 
细节 ”或 者 说 得 更 通俗 一 点 ， 叫 “wigth 作用 的 细节 ”也 束 是 说 ，box-sizing 属性 的 作用 
是 改变 width 的 作用 细节 。 

那 它 改 变 了 什么 细节 昵 ? 一 句 话 ， 改 变 了 width 作用 的 盒子 。 还 记 不 记得 “内 在 盒子 ” 
的 4 个 盒子 ? 它们 分 别 是 content box、padding box、border box 和 margin box。 默 认 情 况 下 ,width 
是 作用 在 content box 上 的 ,box-sizing 的 作用 就 是 可 以 把 widtn 作用 的 盒子 变 成 其 他 几 个 ， 
因此 ， 理 论 上 ，box-sizing 可 以 有 下 面 这 些 写法 : 


.boxl { box-sizing: Content-boxy; } 
.box2 { box-sizing: padding—-box; } 
.box3 { box-sizing: border-box; } 
.box4 { box-sizing: margin—-box; } 


理论 美好 ， 现 实 残酷 。 实 际 上 ， 文 持 情 况 如 下 : 





.boxl { box-sizing: content-box; } /* 默认 值 */ 

.box2 { box-sizing: padding-pbox; } /* Firefox 曾经 支持 */ 
.box3 { box-sizing: border-box; } /* 全 线 支 持 */ 

.box4 { box-sizing: margin-box; } /* 从 未 支持 过 */ 


所 以 ， 我 只 能 拿 bporder-box 属性 值 做 对 比 ， 如 图 3-22 所 示 。 


box-sizing: content-box; box-sizing: border-box: 


上 一 100px 一 一 上 一 100px 一 一 





padding border padding border 


3-22 box-sizing 不 同 值 的 作用 原理 示意 








可 以 看 到 , 所 请 box-sizing:border-box 了 吏 是 让 100 像素 的 宽度 直接 作用 在 border box 
上 ， 从 默认 的 content box 变 成 border box。 此 时 ，content box 从 宽度 值 中 释放 ， 形 成 了 局 部 的 
流动 性 ， 和 padqing 一 起 目 动 分 配 width 值 。 于 是 ， 


.box { 
width: 1l100px; 
box-sizing: border-box; 


} 
宽度 是 100 像素 ， 


.box { 
width: 1l100px; 
box-sizing: border-box; 


border: lpx solid; 
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宽度 也 是 100 像素 ， 


.box { 
width: 100px; 
box-sizing: border-box; 
padding: 20px; 
border: lpx solid; 

} 


宽度 还 是 100 像素 。 

我 们 似乎 找到 了 解决 问题 的 钥匙 ， 自 从 用 了 box-sizing， 标 签 层 级 少 了 ,错位 问题 不 见 
丁 贡 富国 所 与 和 张 页 曾 二 不 费劲: 

实际 上 ， 当 遭遇 类 似 图 3-23 所 示 的 布局 时 ， 

你 会 发 现 ，box-sizing 也 是 捉襟见肘 ， 因 为 边 
框 外 的 间距 只 能 是 margin，, 但 box-sizing 并 
不 支持 margin-box， 知 想 用 一 层 标签 实现 ， 还 
是 需要 计算 ! 

2. 为 何 box-sizing 不 支持 margin-box 图 3-23 box-sizing 也 无 能 为 刁 的 布局 结构 

过 到 这 样 的 场景 的 时 候 ， 想 必 有 人 会 感叹 :“ 要 是 box-sizing 文 持 margin-box 就 好 
了 。” 是 啊 ， 要 是 这 样 就 好 了 ， 但 是 现实 就 是 不 文 持 ， 为 什么 呢 ? 

网 上 有 这 样 的 说 法 ， 说 margin 在 垂直 方向 有 合并 重 登 特性 ， 如 果 文 持 了 了 margin-box， 
合并 规则 就 要 发 生变 更 ， 会 比较 复杂 。 我 对 此 观点 不 敢 荀 同 ， 其 实 当 下 很 多 属性 可 以 灭 抒 
margin 合并 ， 多 一 个 pox-sizing 义 何妨 ， 且 浏览 右 厂 商 实 现 起 来 并 不 难 ， 跟 之 前 的 规范 也 
不 冲突 。 

我 个 人 认为 ， 不 文 持 margin-box 最 大 的 原因 是 它 本 里 就 没有 价值 ! 我 们 不 妨 好 好 想 
想 ,一 个 元 素 , 如 果 我 们 使 用 wigdth 或 neight 设 定好 了 尺寸 ,请 问 , 我们 此 时 设置 margin 
值 ， 其 offset 尺寸 会 有 变化 吗 ? 不 会 啊 ，100 像素 宽 的 元 素 ， 再 怎么 设置 margin， 它 还 
是 100 像素 宽 。 但 是 ，bordqer 和 padding 就 不 一 样 了 ，100 像素 宽 的 元 素 ， 设 置 个 20 像 
素 大 小 的 padqing 值 ，offsetWidth 就 是 140 像素 了 ， 尺 寸 会 变化 。 你 说 ， 一 个 本 身 并 
不 会 改变 元 素 尺寸 的 盒子 , 它 有 让 box-sizing 支持 的 道理 吗 ? box-sizing 就 是 改变 尺 
十 作用 规则 的 ! margin 只 有 在 width 为 auto 的 时 候 可 以 改变 元 素 的 尺寸 ， 但 是 ， 此 时 
元 系 已 经 处 于 流动 性 状态 , 根本 天 不 需要 box-sizing。 有 所以， 说 来 说 去 束 是 margin—box 
本 号 就 没有 价值 。 

男 外 一 个 原因 罕 扯 到 语义 。 如 果 box-sizing 开 了 先河 支持 了 margin-box，margin box 就 变 
成 了 一 个 显 式 的 盒子 ”你 让 background-origin 等 属性 何去何从 , 文 持 还 是 不 文 持 呢 ? “margin 
的 背景 永远 是 透明 的 ”这 几 个 大 字 可 是 在 规范 写 得 清 清楚 楚 ， 难 道 让 背景 色 在 所 谓 的 margin box 中 也 
显示 ?显然 古 不 可 能 的 ， 我 们 可 以 打 自 己 的 脸 ， 但 是 要 想 让 规 冰 打 目 己 的 脸 ， 可 能 吗 ? 

最 后 还 有 一 个 可 能 的 原因 就 是 使 用 场景 需要 。 对 于 box-sizing 的 margin-box 效果 ， 如果 
是 IE10 及 以 上 版 本 浏览 器 ,可 以 试 试 flex 布局 , 如 果 要 兼容 IE8 及 以 上 版 本 可 以 使 用 “宽度 分 离 ”， 
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或 者 特定 场景 下 使 用 “格式 化 宽度 ” 来 实现 ， 也 束 是 并 不 是 强 需 求 。 比 方 be 
padding-box， 就 是 因为 使 用 场景 有 限 ， 仪 Firefox 浏览 器 支持 ， 并 且 是 曾经 支持 ， 从 版 本 50 开 
始 也 不 支持 了 。 其 实 ， 我 个 人 觉得 没 必要 舍弃 ,浏览 器 都 应 该 文 持 ， 束 像 background 属性 那样 。 
成 为 套餐 不 插 好 的 ? 

人 们 写 代 码 时 的 思维 逻辑 ， 总 是 不 由 自主 地 与 现实 世界 相 了 映射 ， 这 是 人 之 第 情 。 因 此 ， 大 
家 对 box-sizing:border-box 。 的 好 感度 普遍 要 远大 于 默认 的 pox-sizing:content- 
box， 甚 至 我 抑 到 有 同行 称 默 认 的 content-box 作用 机 制 是 反 人 类 的 ， 因 此 ， 很 多 同行 开始 
使 用 * {box-sizing:border-box} 进 行 全 局 重 置 ， 对 于 这 种 做 法 ， 我 是 有 自己 的 看 法 的 。 

3. 如 何 评价 *{box-sizing:border-box} 

从 纯 个 人 角度 讲 ， 我 是 不 喜欢 这 种 做 法 的 ， 我 一 同 推 深 的 是 充分 利用 元 取 本 里 的 特性 来 实 
现 我 们 想 要 的 效果 ， 足 够 简单 纯粹 。 因 此 ， 全 局 重 置 的 做 法 是 有 迟 我 的 理念 的 。 

即使 抛 开 个 人 喜好 ， 这 种 做 法 也 是 有 些 问 题 的 。 

(1) 这 种 做 法 犁 产生 没 必要 的 消耗 。 通 配 符 * 应 该 是 一 个 慎 用 的 选择 器 ， 因 为 它 会 选择 所 
0 对 于 普通 内 联 元 系 〈 非 图 卢 等 蔡 换 元 素 )，box-sizing 无 论 是 什么 仁 ， 对 其 

染 表现 都 没有 影响 , 因此 , * 对 这 些 元 系 而 言 束 是 没有 必要 的 消耗 ; 同时 有 些 元 系 , 如 search 
Se 其 默认 的 pox-sizing 束 是 porder-box【〔 如 果 浏 览 右 支持 )， 因 此 ，* 对 
search 类 型 的 <input> 而 言 也 是 没有 必要 的 消耗 。 

(2) 这 种 做 法 并 不 能 解决 所 有 问题 。box-sizing 不 支持 De 只 有 当 元 素 没 
有 水 平 margin 时 候 ，box-sizing 才 能 真正 无 计算 ， 而 “宽度 分 离 ” 等 策略 则 可 以 彻底 解决 
所 有 的 宽度 计算 的 问题 。 因 此 ， 我们 有 必要 好 好 地 想 一 想 ， 5 属性 发 胡 的 初 坝 到 放 
是 什么 ?是 为 了 让 那些 对 block 水 平 元 素 滥用 width 属性 的 人 少 出 bug 吗 ? 我 不 这 么 认为 ! 

4. box-sizing 发 明 的 初 袁 

根据 我 这 么 多 年 的 开发 经 验 , 在 CSS 世界 中 , 唯一 离 不 开 box-sizing:border-box 的 
就 是 原生 普通 文本 框 <input> 和 文本 域 <textarea> 的 100% 自 适应 父 容器 宽度 

拿 文本 域 <textarea> 举 例 ，<textarea> 为 蔡 换 元 素 ， 答 换 元 素 的 特性 之 就 是 尺寸 由 
内 部 元 对 决定 ， 量 无 论 其 display 属性 值 是 inline 还 是 block。 这 个 特性 很 有 意思 ， 对 于 
.0 如 果 其 display 属性 值 为 block， 则 会 具有 流动 性 ， 宽 上 度 由 外 部 尺寸 决定 ， 但 

蔡 换 元 素 的 宽度 却 不 受 display 水 平 影响 ， 因 此 ， 我 们 通过 CSS 修改 <textarea> 的 
display 水 平 是 无 法 让 尺寸 100% 目 适应 父 容 禹 的 : 




































































textarea { 
display: block; /* 还 是 原来 的 尺寸 */ 
} 
所 以 , 我们 只 能 通过 width 设 定 让 <textarea> 尺 寸 100% 自 适应 父 容 器 。 那 么 ， 问题 就 来 了 ， 
<textarea> 是 有 border 的， 而且 需 要 有 一 定 的 padding 大 小 ， 否 则 输入 的 时 候 光 标 会 顶 
着 边框 ,体验 很 不 好 。 于 是 ，width/border 和 padding 注定 要 共存 ， 同 时 还 要 整体 宽度 100% 
目 适 应 容器 。 如 果 不 借助 其 他 标签 ， 肯 定 是 无 解 的 。 
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在 浏览 器 还 没 文 持 box-sizing 的 年 代 ， 我 们 的 做 法 有 点 儿 类 似 于 “宽度 分 离 ” 外 面 移 
套 <div> 标 签 ， 模 拟 porder 和 padding，<textarea> 作 为 子 元 素 ，border 和 padding 
全 部 为 0， 然 后 党 度 100% 自 适应 父 级 <div>。 

手动 输入 http://demo.cssworld.cn/3/2-9.php 或 者 扫 右 侧 的 三 维 码 。 

然而 ， 这 种 模拟 也 有 局 限 性 ， 比 如 无 法 使 用 :focus 高 亮 父 级 的 边框 ， 
因为 CSS 世界 中 并 无 父 选择 器 ， 只 能 使 用 更 复杂 的 敬 套 加 其 他 CSS 技巧 来 
模拟 。 

因此 ,说 来 说 去 , 也 就 pox-sizing:border-box 才 是 根本 解决 之 道 ! 


textarea { 
widthn: 100%; 
—ms—box-sizing: border-box; /* for IE8 */ 





box-sizing: border-box; 


} 

在 我 看 来 , box-sizing 被 发 明 出 来 最 大 的 初 训 应 该 是 解决 蔡 换 元 素 宽 度 自 适应 问题 。 如 
果真 的 如 我 所 言 , 那 *{box-sizing:border-box} 是 不 是 没 用 在 点 儿 上 呢 ?” 是 不 是 应 该 像 下 
面 这 样 CSS 重 置 才 更 合理 呢 ? 


input, textarea, img, video, object { 























box-sizing: border-box; 


} 


3.2.5 ”相对 简单 而 单纯 的 height :auto 


width 和 height 是 CSS 世界 中 同一 类 型 魔法 师 ， 都 是 直接 限定 元 素 尺 寸 的 。 所 以 ， 它 
们 共用 一 套 “ 合 尺寸 ”模型 ，pox-sizing 的 解释 也 是 类 似 的 。 但 是 ， 它 们 在 不 少 地 方 还 是 有 
明显 区 别 的 ， 其 中 之 一 束 是 height:auto 要 比 width:auto 简单 而 单纯 得 多 。 

原因 在 于 ，CSS 的 默认 流 是 水 平方 癌 的 ， 宽 度 是 稀缺 的 ， 高 度 是 无 限 的 。 因 此 ， 宽 上 度 的 分 
配 规则 就 比较 复杂 ， 高 度 就 显得 比较 随意 。 比 方 说 ， 小 明 没 钱 交 房租 而 去 搬 砖 ， 一 块 砖 涉 5 cm 
高 ， 请 问 ，10 块 砖 操 在 一 起 多 高 ? 很 简单 ，50 cm。height :auto 的 表现 也 基本 上 了 恕 是 这 个 套 
路 : 有 几 个 元 系 盒 子 ， 每 个 多 高 ， 然 后 一 加 ， 束 是 最 终 的 高 度 值 了 。 

当然 ， 涉 及 具体 场景 ， 就 会 有 其 他 的 小 故事 ， 比 方 说 元 素 float 容器 高 度 没 了 了， 或 者 是 
margin 直接 宣 过 去 ， 高 度 比 预期 的 矮 了 。 这 个 其 实 不 是 neight 的 问题 。 关 于 这 一 点 ， 我 会 
在 对 应 的 属性 章节 儿 大 家 一 探 完 葛 。 

此 外 ， height :auto 也 有 外 部 尺寸 特性 。 但 据 我 所 知 ， 其 仅 存 在 于 绝对 定位 模型 中 ， 也 
就 是 “格式 化 高 度 "。“ 格 式 化 高 度 ” 与 “格式 化 宽度 ”类 似 ， 融 不 展开 讲解 了 。 


3.2.6 ”天 于 height :1005S 


height 和 width 还 有 一 个 比较 明显 的 区 别 就 是 对 百分比 单位 的 支持 。 对 于 width 属性 ， 
就 算 父 元 系 width 为 auto， 其 百分比 值 也 是 支持 的 ; 但 是 ， 对 于 height 属性 ， 如 果 父 元 素 
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height 为 auto， 只 要 子 元 素 在 文档 流 中 ， 其 百分比 值 完 全 就 被 忽略 了 。 例 如 ， 茶 小 日 想 要 在 
页 面 插 入 一 个 <div>， 然 后 满 屏 显 示 背 景 图 ， 就 写 了 如 下 CSS: 
div { 
width: 100%; ”/* 这 是 多 余 的 */ 
height: 100%;  /* 这 是 无 效 的 */ 
background: url (bg.jJp9g); 








} 
然后 他 发 现 这 个 <daiv> 高 度 永 远 是 0， 哪 介 其 父 级 <bodqy> 塞 满 了 内 容 也 是 如 此 。 事 实 上 ， 他 需 
要 如 下 设置 才 行 : 

html, lbody { 


height: 100%; 
} 


并 且 仅 仅 设 置 <bodqy> 也 是 不 行 的 ， 因 为 此 时 的 <boqy> 也 没有 具体 的 高 度 值 : 


body { 
/* 子 元 素 height :100$ 依 旧 无 效 */ 








} 

只 要 经 过 一 定 的 实践 , 我 们 都 会 发 现 对 于 普通 文档 流 中 的 元 素 , 百分比 高 度 值 要 想起 作用 ， 
其 父 级 必须 有 一 个 可 以 生效 的 高 度 值 ! 但 是 ， 怕 是 很 少 有 人 思考 过 这 样 一 个 问题 : 为 何 父 级 没 
有 具体 高 度 值 的 时 候 ，height :100g 会 无 效 ? 

1. 为 何 height :100$ 无 效 

有 一 种 看 似 合理 的 说 法 : 如 果 父 元 素 neight :auto 子 元 素 还 支持 neignt:100%， 则 
父 元 素 的 高 度 很 容易 陷入 死 循 环 ， 高 度 无 限 。 例如， 一 个 <div> 元 素 里 面 有 一 张 
vertical-align 为 pottom 同时 高 度 为 192 像素 的 图 片 ， 此 时 ， 该 <div> 高 度 就 是 192 
像素 ， 假 设 此 时 插入 一 个 子 元 素 ， 高 度 设 为 100s$， 如 果 此 时 neight :100%$ 可 以 计算 ， 则 
子 元 素 应 该 也 是 192 像素 。 但 是 ， 父 元 素 height 值 是 auto， 岂 不 是 现在 高 度 要 从 原来 的 
192 像素 变 成 384 像素 ， 然 后 height :100s 的 子 元 素 高 度 又 要 变 成 384 像素 ， 父 元 素 高 度 
又 双 倍 …… 死 循环 了 1! 

实际 上 ， 这 种 解释 是 错误 的 ， 大 家 和 干 万 别 被 误导 。 证 据 就 是 宽度 也 存在 类 似 场 景 ， 但 并 没 
有 和 死 循 环 。 例 如 ， 在 下 面 这 个 例子 中 ， 父 元 素 采 用 “最 大 宽度 ” 然后 有 一 个 inline-block 
子 元 素 宽 度 100%: 



































<div class="box"> 

<img src="1.jJpg"> 

<span class="textn> 红 色 背 景 是 父 级 </span> 
</div> 
.box { 

display: inline-block; 

white—-space: nowrap; 

background-color: #cd0000; 


} 
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.text { 
display: inline-block; 
widthn: 100%; 
background-color: #34538b; 
Color: #f£ff; 

} 


如 果 按 照 上 面 “ 高 度 死 循环 ”的 解释 ， 这 里 也 应 该 “宽度 死 循 环 ”% 因为 后 面 的 inline-block 
元 聚 按照 我 们 的 理解 应 该 会 让 父 元 系 的 宽度 进一步 变 大 。 但 实际 上 并 没有 ， 和 宽度 范围 可 能 超出 
你 的 预期 〈 见 几 3-24)。 父 元 素 的 宽度 就 是 图 片 加 文字 内 容 的 宽度 之 和 。 

手动 输入 http://demo.cssworld.cn/3/2-10.php 或 者 扫 右 侧 的 二 维 人 码 。 






































3-24 ”宽度 为 图 片 加 文字 内 容 的 宽度 之 和 


为 什么 会 这 样 表现 呢 ? 

要 明白 其 中 的 原因 要 先 了 解 浏 览 占 渔 染 的 基本 原理 。 前 先 ， 先 下 载 文 档 内 容 ， 加 载 头 部 的 
样式 资源 (如果 有 的 话 ), 然后 按照 从 上 而 下 、 自 外 而 内 的 顺序 泻 染 DOM 内 容 。 和 套用 本 例 吉 是， 
先 泻 染 父 元 系 ， 后 演 染 子 元 了 么 ， 是 有 驳 后 顺序 的 。 因 此 ， 当 演 染 到 父 元 素 的 时 候 ， 子 元 又 的 
width:100% 并 没有 泻 染 ,宽度 束 是 图 片 加 文字 内 容 的 宽度 ; 等 泻 染 到 文字 这 个 子 元 素 的 时 候 ， 
父 元 素 宽度 已 经 固定 ， 此 时 的 wiqth:100% 就 是 已 经 固定 好 的 父 元 素 的 宽度 。 宽 度 不 够 怎么 
办 ? 淤 出 束 好 了 ，overflow 属性 束 古 为 此 而 生 的 。 

同样 的 道理 ， 如 果 height 支持 任意 元 素 100s$， 也 是 不 会 死 循 环 的 。 和 宽度 类 似 ， 静 态 
演 染 ， 一 次 到 位 。 

那 问 题 又 来 了 : 为 何 宽度 文 持 ， 高 度 就 不 文 持 昵 ? 规范 中 其 实 给 出 了 答案 。 如 有 果 包 含 
块 的 高 度 没 有 显 式 指定 〈 即 高 度 由 内 容 决 定 )， 并 且 访 元素 不 是 绝对 定位 ， 则 计算 值 为 
auto。 一 句 话 总 结 就 是 : 因为 解释 成 了 auto。 要 知道 ，auto 和 百分比 计算 ， 肯定 是 算 
不 了 的 : 


'auto' * 100/100 = NaN 


但 是 ， 宽 度 的 解释 却 是 : 如 果 包 含 块 的 览 度 取决 于 该 元 系 的 完 度 ， 那 么 产生 的 布局 在 CSS 2.1 
中 是 未 定义 的 。 

还 记 不 记得 本 书 第 2 章 最 后 的 “未 定义 行为 ? 吗 ? 这 里 的 宽度 布局 其 实 也 是 “未 定义 行为 ”， 
也 束 是 规范 没有 明确 表示 该 怎样 ， 浏 抠 硕 可 以 目 己 根据 理解 去 友 挥 。 好 在 根据 我 的 测试 ， 布 局 
效果 在 各 个 浏览 器 下 都 是 一 致 的 .这 里 和 高 度 的 规范 定义 就 区 别 明 旺 了 , 高 度 明 确 了 就 是 auto， 
局 度 百 分 比 计算 上 自然 无 果 ，wigth 却 没有 这 样 的 说 法 ， 因 此 ， 束 按照 包含 块 真实 的 计算 值 作为 
百分比 计算 的 基数 。 
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2. 如 何 让 元 素 支 持 height :100% 效 果 

如 何 让 元 素 文 持 height :100% 效 果 ? 这 个 问题 的 答案 其 实 上 面 的 规范 已 经 给 出 了 ， 即 有 
两 种 方法 。 

(1) 设 定 显 式 的 高 度 值 。 这 个 没什么 好 说 的 ， 例如， 设置 neight :600px， 或 者 可 以 生效 
的 百分比 值 高 度 。 例 如 ， 我 们 比较 常见 的 : 

html, body { 


height: 100%; 
} 


(2) 使 用 绝对 定位 。 例 如 : 


div { 
height: 100%; 
position: absolute; 


| 


此 时 的 neight :100% 就 会 有 计算 值 ， 即 使 祖先 元 素 的 height 计算 为 auto 也 是 如 此 。 
需要 注意 的 是 ， 绝 对 定位 元 系 的 百分比 计算 和 非 绝 对 定位 元 素 的 百分比 计算 是 有 区 别 的 ， 区 别 
在 于 绝对 定位 的 宽 高 百分比 计算 是 相对 于 padding box 的 ， 也 束 是 说 会 把 padqding 大 小 值 计 算 
在 内 ， 但 是 ， 非 绝对 定位 元 素 则 是 相对 于 content box 计算 的 。 

我 们 可 以 看 一 个 例子 ， 对 比 一 下 : 

.box { 


height: 160px; 
padding: 30px; 

















box-sizing: border-box; 
background-color: #beceeb; 


} 


.child f{ 
height: 100%; 
background-color: #cd0000; 
} 
.box { 
height: 160px; 
padding: 30px; 
box-sizing: border-box; 
background-color: #beceeb; 
position: relative; 
} 
.child { 
height: 100%; width: 100%; 
background-color: #cd0000; 
position: absolute; 


} 
可 以 看 到 ， 非 定位 元 系 的 宽 高 百分比 计算 不 会 将 Paddqing 计算 在 内 ， 如 图 3-25 所 示 。 
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如 果 对 图 3-25 所 示 的 结果 表示 质疑 ， 也 可 以 访问 http:/demo.cssworld.cn/ 3/2-11.php 或 者 扫 下 
面 的 二 维 码 。 


高 度 100px 
高 度 160px 





3-25 ”绝对 定位 和 非 绝 对 定位 百分比 高 度 对 比 


我 对 这 两 种 height :100s 生 效 方法 的 评价 是 : 显 式 高 度 方 法 中 规 中 矩 ， 意 料 之 中 ;绝对 定 
位 方法 剑 走 偏锋 ， 文 持 隐 式 高 度 计算 ， 给 人 意外 之 襄 ， 但 本 里 脱离 文档 流 ， 使 其 仅 在 某 些 场 景 
四 两 拨 干 厅 的 效果 , 比方 说 “图 片 左右 半 区 点 击 分 列 上 一 张 图 下 一 张 图 效 末 ”的 布局 ( 见 图 3-26)。 

图 3-26 所 示 的 效果 有 专门 的 演示 页面 ， 可 以 手动 输入 http://demo.cssworld.cn/3/2-12.php 或 
者 扫 下 和 面 的 二 维 人 码 。 























上 一 张 一 





图 3-26 图 片上 下 切 图 布局 示意 
原理 很 简单 ， 束 是 在 图 片 外 面包 一 层 具 有 “ 包 于 性 ”同时 具有 定位 特性 的 标签 。 例 如 : 


.box { 
display: inline-block; 
position: relative; 


} 
此 时 ， 只 要 在 图 片上 覆盖 两 个 绝对 定位 ， 同 时 设 height :100$， 则 无 论 图 片 多 高 ， 我 们 的 左 
右 半 区 都 能 上 自动 和 图 片 高 度 一 模 一 样 ， 无 须 任 何 使 用 JavaScript 的 计算 。 














33 CSSmin-width/max-width 和 min-height/max-height 

膏 完 了 width 和 height， 下 面 轮 到 min-wiqth/max-widqth 和 min-height/max- 
height 了 ， 它 们 有 很 多 共性 。 比 方 说 ， 它 们 都 是 与 尺寸 相关 的 ， 盒 尺寸 机 制 和 一 些 值 的 泻 染 
规则 也 是 一 样 的 ， 因 此 ， 这 部 分 内 容 这 里 就 不 袭 述 了 ， 这 里 只 简单 讲 几 点 min/max-width/ 
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height 和 width/height 不 一 样 的 地 方 。 
3.3.1 为 流体 而 生 的 min-width/max-width 


在 CSS 世界 中 ，min-wiqth/max-width 出 现 的 场景 一 定 是 自 适应 布局 或 者 流体 布局 中 ， 
因为 ,如果 是 那 各 width/height 定 死 的 砖头 式 布局 , min-width/max-width 了 束 没 有 任何 出 
现 的 价值 ， 因 为 它们 是 具有 边界 行为 的 属性 ， 所 以 没有 变化 自然 无 法 触及， 也 就 没有 使 用 价值 。 

因此， 新 人 并 不 会 经 常 使 用 min-width/max-width， 只 有 随 着 CSS 技能 深入 ， 能 够 若 
顾 还 原 性 的 同时 还 兼顾 扩展 性 和 适 配 性 之 后 ，min-width/max-width 才 会 用 得 越 来 越 多 ， 
也 才能 真正 感受 到 IE7 浏览 器 就 支持 min/max-width 是 多 么 好 的 一 件 事情 。 

现代 加 面 显示 嚣 分辨 率 越 来 越 大 ，960 像素 网 页 设计 已 经 显得 有 些小 家 丰 玉 了 ， 但 随便 摘 
一 个 大 尺寸 (如 1400 像素 ) 的 网 页 宽度 也 不 合 时 宜 ， 因 为 还 有 很 多 笔记 本 用 户 ， 此 时 ， 一 种 特 
定 区 则 内 的 上 自 适 应 布局 方案 就 诞生 了 ,网 页 宽度 在 1200 一 1400 像素 自 适 应 , 既 满 足 大 屏 的 大 气 ， 
又 满足 笔记 本 的 良好 显示 ， 此 时 ，min-width/max-width 就 可 以 大 显 神威 了 : 

.Container { 

min-width: 1200px; 


max-width: 1400px; 
} 


对 ， 无 须 wigdth 设置 ， 直 接 使 用 min-width/max-width。 
在 公众 号 的 热门 文章 中 ， 经 常会 有 图 片 ， 这 些 图 片 都 是 用 户 上 传 产生 的 ， 因 此 尺寸 会 有 大 
有 小 ， 为 了 避免 图 片 在 移动 端 展示 过 大 影响 体验 ， 第 第 会 有 下 面 的 max-widqtn 限制 : 
Img { 
max-width: 100%; 


height: auto!important,; 


} 

height:auto 是 必需 的 , 人 否则, 如 果 原 始 图 片 有 设 定 height, max-width 生效 的 时 候 ， 
图 片 束 会 被 水 平 压 纵 。 强 制 height 为 auto 可 以 确保 宽度 不 超出 的 同时 使 图 片 保持 原来 的 比 
例 。 但 这 样 也 会 有 体验 上 的 问题 ， 那 就 是 在 加 载 时 图 片 占据 高 度 会 从 0 变 成 计算 局 上 度 ， 图 文 会 
有 明显 的 深 布 式 下 沙 。 


3.3.2 与 众 不 同 的 初始 值 


min-width/max-width 和 min-heigh/max-height 从 长 相 上 看 明显 和 wigdtn/ 
height 是 一 个 家 族 的 ， 总 以 为 属性 值 、 模 型 都 是 一 样 的 ， 但 是 有 一 个 地 方 束 搞 了 特殊 ， 那 就 
是 初始 值 。width/height 的 默认 值 是 auto, 而 min-width/max-width 和 min-heigh/ 
max-height 的 初始 值 则 要 复杂 些 。 这 里 要 分 为 两 部 分 ， 分 别 是 max-* 系 列 和 min-* 系 列 。 
max-width 和 max-height 的 初始 值 是 none,min-width 和 min-height 的 初始 值 是 .…… 

虽然 MDN 和 W3C 维基 的 文档 上 都 显示 min-width/min-heignht 的 初始 值 是 0, 但 是 , 根 
据 我 的 分 析 和 测试 ， 所 有 浏览 器 中 的 min-width/min-height 的 初始 值 都 是 auto。 证 据 如 下 : 
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(1) min-wdith/height 值 为 auto 合法。 人 例如， 设置 : 


<body style="min-width:auto;"> 


结果 所 有 浏览 器 下 : 
document .body.style.minWwidth; // 结果 是 auto 


说 明 min-* 支 持 auto 什 ， 同 样 ， 如 果 是 max-width:auto， 结 果 则 是 ''， 进 一 步 证 明 
min-width/height 值 为 auto 合法。 

(2) 数值 变化 无 动画 。 假 设 元 素 的 min-width/min-height 的 初始 值 是 0， 那么 ， 当 我 们 
设置 transition 过 渡 同 时 改变 了 min-width/min-height 值 ， 电 不 是 应 该 有 动 男 效 果 ? 结果 : 





.box { 
transition: min-height .3s; 
} 
.box:hover { 
min-height: 300px; 
} 


孔 标 经 过 .box 元 素 ， 元 素 突 然 变 品 ， 并 无 动画 效果 ， 但 是 ， 如 果 是 下 面 这 样 的 设置 : 


.box { 
min—-height: 0; 








transition: min-height .3s; 
0 { 
min-height: 300px; 

} 

忌 标 经 过 .box 元 素 ，transition 动 男 效 果 就 出 现 了 。 这 了 驶 证 明了 ，min-heignht 的 初始 值 
不 是 0， 既 然 不 是 0， 那 束 应 该 是 所 有 浏览 占 部 文 持 的 auto。 

于 是 ， 得 到 如 下 结论 : min-width/min-height 的 初始 值 是 auto，,， max-width/max- 
height 的 初始 值 是 nonemax-width/max-height 的 初始 值 为 何 是 none 而 不 是 auto 呢 ? 
这 个 问题 的 答案 其 实 与 下 面 小 节 的 内 容 有 天。 我 们 不 妨 举 个 简单 的 例子 解释 一 下 ， 已 知 父 元 系 宽 
度 400 像素 , 子 元 素 设置 宽度 800 像素 , 假如 说 max-width 初始 值 是 auto, 那 自然 使 用 和 wiadth 
一 样 的 解析 渔 染 规则 ， 此 时 max-wiqth 的 计算 值 就 应 该 是 父 元 素 的 400 像 系 ， 此 时 ， 你 就 会 
发 现 ， 子 元 素 的 800 像素 直接 完蛋 了 ， 因 为 max-width 会 覆盖 width。 于 是 ， 我 们 的 width 
水 远 不 能 设置 为 比 auto 计算 值 更 大 的 宽度 值 了 , 这 显然 是 有 问题 的 , 这 束 是 为 什么 max-widtnh 
初始 值 是 none 的 原因 。 


3.3.3 ”超越 !1ijmportant， 起 越 最 大 


CSS 世界 中 ，min-width/max-width 和 min-height/max-height 属性 间 ， 以 及 与 
width 和 height 之 间 有 一 套 相 互 覆 盖 的 规则 。 这 套 规则 用 一 名 比较 通俗 的 话 概括 就 是 : 起 
越 1important， 超 越 最 大 。 究 葛 是 什么 意思 呢 ? 以 与 宽度 相关 的 属性 举例 说 明 。 
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1. 超越 !ijmportant 

超越 ! important 指 的 是 max-width 会 覆盖 width， 而 且 这 种 覆盖 不 是 普通 的 履 盖 ， 是 超级 
攻 辣 ， 才 盖 到 什么 程度 呢 ? 大 家 应 该 都 知道 CSS 世界 中 的 !important 的 权重 相当 高 ， 在 业界 ， 往 
往 会 把 !important 的 权重 比 成 “泰坦 尼克 ” 比 直接 在 元 素 的 style 属性 中 设置 CSS 声明 还 要 高 ， 
一 般 用 在 CSS 和 窗 新 JavaScript 设置 上 。 但 是 ， 束 是 这 么 历 害 的 !important， 直 接 被 max-width 一 
个 浪头 就 拍 沉 了 。 比 方 说 ， 针 对 下 面 的 HTML 和 CSS 设置 ， 图 片 最 后 呈现 的 宽度 是 多 少 呢 ? 


<img src="1.jpg" style="width:480px!important;"> 











img { max-width: 256px; } 
答案 是 256px。style、!important 通通 靠边 站 ! 因为 max-width 会 禾 尊 width。 

眼见 为 实 ， 手动 输入 http:/demo.cssworld.cn/3/3-1.php 或 者 扫 下 面 的 二 维 码 。 结 果 如 图 3-27 
所 示 。 





3-27 图 上 宽度 256 像素 


2. 超越 最 大 
超越 最 大 指 的 是 min-wiqth 履 盖 max-width, 此 规则 发 生 在 min-width 和 max-widtnh 
冲突 的 时 候 。 例 如 ， 下 和 面 这 种 设置 : 
.Container { 
min—width: 1400px; 
max—-width: 1200px; 
} 


最 小 宽度 居然 比 最 大 宽度 设置 得 还 大 ， 此 时 ， 两 者 必定 是 你 死 我 活 的 状态 。 完 苋 谁 死 呢 ?遵循 
“超越 最 大 ”规则 (注意 不 是 “后 来 大 上 ”规则 )，min-width 活 下 来 ，max-width 被 忽略 ， 
于 是 ， .container 元 素 表 现 为 人 至少 1400 像素 宽 。 

此 和 窗 亲 规 则 比较 好 理解 ， 束 不 专门 演示 了 。 


3.3.4 ”任意 高 度 元 床 的 展开 收 起 动画 技术 


“展开 收 起 ”效果 是 网 页 中 比较 常见 的 一 种 交互 形式 , 通常 的 做 法 是 控制 display 属性 值 
在 none 和 其 他 值 之 间 切 换 ， 虽 说 功能 可 以 实现 ， 但 是 效果 略 显 生硬 ， 所 以 就 会 有 这 样 的 需求 一 
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希望 元 又 展开 收 起 时 能 有 明显 的 高 度 滑动 效果 。 传 统 实现 可 以 使 用 jQuery 的 sliqdeUp()/ 
slideDown () 方 法， 但 是 ， 在 移动 端 ， 因 为 CSS3 动画 支持 良好 ， 所 以 移动 端的 JavaScript 框 
架 都 是 没有 动画 模块 的 。 此 时 ， 使 用 CSS 实现 动画 就 成 了 最 佳 的 技术 选 型 。 

我 们 的 第 一 反应 就 是 使 用 height + overflow:hidden 实现 。 但是， 很 多 时 候 ， 我 们 展 
开 的 元 素 内 容 是 动态 的 ， 换 句 话 说 高 度 是 不 国定 的 ， 因 此 ，height 使 用 的 值 是 默认 的 auto， 
应 该 都 知道 的 auto 是 个 关键 字 值 ， 并 非 数 值 ， 正 如 height :100% 的 100$% 无 法 和 auto 相 计 
算 一 样 ， 从 0px 到 auto 也 是 无 法 计算 的 ， 因 此 无 法 形成 过 渡 或 动画 效果 。 

因此 ， 下 面 代 码 呈 现 的 效果 也 是 生硬 地 展开 和 收 起 ; 

.element { 


height: 0; 
overflow: hidden; 

















transition: height .25s; 
} 
.element .active { 

height: auto; /* 没有 transition 效果 ， 只 是 生硬 地 展开 */ 
} 


难道 就 没有 什么 一 劳 永 逸 的 实现 方法 吗 ? 有 ， 不 妨 试 试 max-height，CSS 代码 如 下 : 
.element { 
max-height: 0; 
overflow: hidden; 
transition: max-height .25s; 
0 { 
max-height: 666px; ”/* 一 个 足够 大 的 最 大 高 度 值 */ 
} 
其 中 展开 后 的 max-height 值 ， 我 们 只 需要 设 定 为 保证 比 展开 内 容 高 度 大 的 值 束 可 以 ， 因 为 
max-height 值 比 height 计算 值 大 的 时 候 ， 元 素 的 高 度 就 是 neight 属性 的 “TT 
计算 高 度 ， 在 本 交互 中 ， 也 束 是 height:auto 时 候 的 高 度 值 。 于 是 ,一 1 高 度 
不 定 的 任意 元 素 的 展开 动画 效 末 就 实现 了 。 
眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/3-2.php 或 者 扫 右 侧 的 二 mT 
维 码 。 Trt 
但 是 ， 使 用 此 方法 也 有 一 点 要 注意 ， 即 虽然 说 从 适用 范围 讲 ，max- heignt 值 越 大 使 用 
场景 越 多 ， 人 但是， 如果 max-height 值 太 大 ， 在 收 起 的 时 候 可 能 会 有 “效果 延迟 ”的 问 
题 ， 比 方 说 ， 我 们 展开 的 元 素 高 度 是 100 像 和 水， 而 max-height 是 1000 像素 ， 动 男 时 间 
是 250 ms， 假 设 我 们 动画 函数 是 线性 的 ， 则 前 225 ms 我 们 是 看 不 到 收 起 效果 的 ， 因 为 
max-height 从 1000 像素 到 100 像 系 变化 这 上 篡 时间， 元 素 不 会 有 区 域 被 隐藏 ， 会 给 人 人 动 
男 延 人 运 225 ms 的 感觉 ， 相 信 这 不 是 你 想 看 到 的 。 
因此 ， 我 个 人 建议 max-height 使 用 足够 安全 的 最 小 值 ， 这 样 ， 收 起 时 即使 有 延迟 ， 也 
会 因为 时 间 很 息 ， 很 难 被 用 户 察 觉 ， 并 不 会 影响 体验 。 
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3.4 ”内 联 元 于 


如 果 纯 粹 套 CSS 规范 的 话 ， 这 里 标题 应 该 是 “内 联 级 元 素 ”(inline-level elements)。 但 在 本 书 
中 “内 联 级 元 际 ” 全 部 简称 为 “内 联 元 素 ”， 原 因 在 第 3 章 开 涉 部 分 已 做 说 明 ， 不 再 资 述 。 

在 讲 元 素 的 内 外 盒子 的 时 候 ， 前 面 曾 提 到 过 “外 在 盒子 ”有 inline、block 和 run-in 
三 种 水 平 。 其 中 run-in 鲜 有 人 使 用 ， 且 有 淘汰 风险 ， 可 以 忽略 ; 剩 下 的 inline 和 block 
几乎 瓜分 了 剩 下 的 全 部 江山 ， 是 流体 布局 的 本 质 所 在 。 从 作用 上 来 讲 ， 块 级 负责 结构 ， 内 联 负 
员 内 容 。CSS 世界 是 为 图 文 展示 而 设计 的 。 所 请 图 文 ， 指 图 片 和 文字 ， 是 最 典型 的 内 联 元 素 。 
所 以 ， 在 CSS 世界 中 ， 内 联 元 系 古 最 为 重要 的 ， 涉 及 的 CSS 属性 也 非常 之 多 ， 这 些 CSS 属性 
往往 具有 继承 特性 ， 混 合 在 一 起 会 导致 CSS 解析 规则 非常 复杂 。 这 就 是 内 联 元 了 系 的 解析 比 块 级 
元 又 解析 更 难 理解 的 原因 一 一 其 是 多 个 属性 共同 作用 的 结果 ， 需 要 对 内 联 元 素 特性 ， 内 联 盒 模 
型 以 及 当前 CSS 属性 都 了 解 ， 才 能 明日 其 中 的 原因 。 

不 要 担心 ， 从 这 里 开始 ， 我 们 会 慢 慢 揭 开 内 联 世界 的 层 层面 纱 。 


3.4.1 哪些 元 素 是 内 联 元 系 


我 们 先 来 了 解 如 何 辨 别 内 联 元 素 。 

1. 从 定义 看 

首先 要 明白 这 一 点 :“ 内 联 元 素 ” 的 “内 联 ” 特 指 “ 外 在 盒子 ” 和 “display 为 inline 
的 元 素 ” 不 是 一 个 概念 ! inline-block 和 inline-table 都 是 “内 联 元 素 ” 因为 它们 的 
“外 在 盒子 ”都 是 内 联 盒子 。 自然 display :inline 的 元 素 也 是 “内 联 元 素 ” 那么 , <button> 
按钮 元 素 是 内 联 元 素 ， 因 为 其 display 默认 值 是 inline-block; <img> 图 片 元 素 也 是 内 联 
元 素 ， 因 为 其 display 默认 值 是 inline 等 。 

2. 从 表现 看 

就 行为 表现 来 看 ,“ 内 联 元 素 ” 的 典型 特征 就 是 可 以 和 文字 在 一 行 显示 。 因 此 ， 文 字 是 内 
联 元 系 ， 图 卢 是 内 联 元 素 ， 按 钮 是 内 联 元 素 ， 和 输入 框 、 下 拉 框 等 原生 表单 控件 也 是 内 联 元 素 。 

下 面 有 一 个 疑问 : 浮动 元 系 貌 似 也 是 可 以 和 文字 在 一 个 水 平 上 显示 的 ， 是 不 是 浮动 元 素 也 
是 内 联 级 别 的 呢 ? 不 是 的 。 实 际 上 ， 浮 动 元 素 和 后 面 的 文字 并 不 在 一 行 显示 ， 浮 动 元 素 已 经 在 
文档 流 之 外 了 。 证 据 就 是 ， 当 后 面 文字 足够 多 的 时 候 ， 文 字 并 不 是 在 浮动 元 素 的 下 面 ， 而 是 继 
续 在 后 面 。 这 就 说 明 ， 浮 动 元 素 和 后 面 文字 不 在 一 行 ， 只 是 它们 恰好 站 在 了 -一 起 而 已 。 真 相 是 ， 
浮动 元 又 会 生成 “ 块 合子”， 这 就 是 后 话 了 。 


3.4.2 ”内 联 世 界 深入 的 基础 一 一 内 联 盒 模型 


本 节 的 内 容 可 谓 CSS 进 阶 标志 知识 点 ， 是 入 门 CSS 开发 人 员 和 熟练 CSS 开发 人 员 之 间 的 
分 水 岭 ， 是 需要 反复 拿 来 看 拿 来 体味 的 。 这 里 介绍 的 “内 联合 模型 ”是 简易 版 ， 但 是 已 经 足够 ， 
如 果 大 家 对 完整 的 概念 和 名 词 感 兴 趣 ， 可 以 阅读 规范 文档 。 
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下 面 是 一 段 很 普通 的 HTML: 


MM 


<p> 这 是 一 行 普通 的 文字 ， 这 里 有 个 <em>em</em> 标签 。</p> 


看 似 普通 ， 实 际 上 包含 了 很 多 术语 和 概念 ， 或 者 换 种 通俗 的 说 法 ， 包 含 了 很 多 种 
归结 为 下 耐 这 些 盒子 。 

(1) 内 容 区 域 (content area)。 内 容 区 域 指 一 种 围绕 文字 看 不 见 的 盒子 ， 其 大 小 仪 受 字 和 从 本 里 
特性 控制 ， 本 质 上 是 一 个 字符 盒子 (character box); 但 是 有 些 元 素 ， 如 图 片 这 样 的 奉 换 元 素 ， 其 内 
容 显然 不 是 文字 ， 不 存在 字符 盒子 之 类 的 ， 因 此 ， 对 于 这 些 元 素 ， 内 容 区 域 可 以 看 成 元 素 上 自身 。 

定义 上 说 内 容 区 域 是 “看 不 见 的 ” 这 对 理解 “内 容 区 域 ”是 不 利 的 ， 好 在 根据 我 多 年 的 
理解 与 实践 ， 我 们 可 以 把 文本 选中 的 背景 色 区 域 作为 内 容 区 域 ， 例 如 ， 如 图 3-28 所 示 。 

这 对 于 解释 各 种 内 联 相 天 的 行为 都 非常 可 
行 ， 文 本 选中 区 本 质 上 就 等 同 于 基本 使 尺 寸 中 的 
content box， 都 是 content， 语义 上 也 说 得 通 。 

实际 上 ， 内 容 区 域 并 没有 明确 的 定义 ， 所 以 将 其 理解 为 em 盒 (em-box， 可 看 成 是 中 文字 符 占 
据 的 1 em 高 度 区 域 ) 也 是 可 以 的 ， 但 是 在 本 书 中 ， 为 了 方便 演示 和 讲解 ， 将 其 全 部 理解 为 文本 选 
中 的 区 域 。 

在 IE 和 Firefox 浏览 左下 ， 文 字 的 选中 育 景 总 能 准确 反映 内 容 区 域 范 围 ， 但 是 Chrome 浏 
览 郁 下 ，: :selection 光 围 并 不 总 是 准确 的 , 例如 , 和 图 乒 混 排 或 者 有 垂直 Paddqing 的 时 候 ， 
汽 围 会 明显 过 大 ， 这 一 点 需要 注意 。 后 耐 行 高 等 草 市 会 利用 此 选中 背景 帮助 我 们 理解 。 

内 容 区 域 在 解释 内 联 元 素 的 各 种 行为 表现 时 ， 出 镜 率 出 奇 地 高 ， 建 议 大 家 这 里 多 多 留意 。 

(2) 内 联 盒子 (inline box)。“ 内 联 盒子 ”不 会 让 内 容 成 块 显示 ,而 是 排 成 一 行 ， 这 里 的 “内 
联 盒 子 ” 实 际 指 的 就 是 元 系 的 “外 在 盒子 ”用 来 决定 元 系 是 内 联 还 是 块 级 。 该 盒子 义 可 以 细 分 
为 “内 联 盒子 ”和 “匿名 内 联 盒子 ”两 类 : 


一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 站 天 7Y 一 一 一 一 一 一 
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图 3-28 ”内容 区 域 示 意 









































如 条 外 部 含 内 联 标签 (<span>、<a> 和 <em> 等 )， 则 属于 “内 联 盒子 ”( 实 线 杠 标注) 如 
果 是 个 光秃秃 的 文字 ， 则 属于 “匿名 内 联 盒 子 ”( 虚 线 框 标注 )。 

需要 注意 的 是 ， 并 不 是 所 有 光秃秃 的 文字 都 是 “匿名 内 联 盒 子 ”， 其 还 有 可 能 是 “匿名 块 
级 例子 ”， 天 键 要 看 前 后 的 标签 是 内 联 还 是 块 级 。 

(3) 行 框 盒子 〈line box)。 例 如 : 

















<p> [这 是 一 行 普通 的 文字 ， 这 里 有 个 <em>em</em> 标签 。| </p> 
每 一 行 束 是 一 个 “ 行 框 例子 ”( 实 线 框 标注 )， 每 个 “ 行 框 例子 ”又 是 由 一 个 一 个 “内 联 盒子” 
组 成 的 。 

(4) 包含 盒子 (containing box)。 例 如 : 











<p> 这 是 一 行 普通 的 文字 ， 这 里 有 个 <em>em</em> 标签 。</p> 


<p> 标 签 就 是 一 个 “包含 盒子 ”( 实 线 框 标注 )， 此 盒子 由 一 行 一 行 的 “ 行 框 合子” 组成。 
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i 是 和 
为 盒子 更 形象 、 更 容易 理解 。 


3.4.3” 幽 灵 空 日 和 布 所 


“幽灵 空 晶 节点 ”是 内 联合 模型 中 非常 重要 的 一 个 概念 ， 具 体 指 的 是 : 在 HTML5 文档 声明 
中 ， 内 联 元 素 的 所 有 人 解析 和 泻 染 表现 就 如 同 每 个 行 框 例子 的 前 面 有 一 个 “ 空 日 节点 ”一 样 。 这 
个 “ 衬 自 节点 ”永远 透明 ， 不 占据 任何 宽度 ， 看 不 见 也 无 法 通过 脚本 获取 ， 束 好 像 费 灵 一 样 ， 
但 又 确 确 实 实 地 存在 ， 表 现 如 同文 本 节点 一 样 ， 因 此 ， 我 称 之 为 “幽灵 空白 节点 ” 

注意 ， 这 里 有 一 个 前 提 ， 文 档 声 明 必 须 是 HTMLS 文档 声明 (HTML 代码 如 下 )， 如 果 还 是 
本 Ba 


<!ldoctype html> 
<html> 


我 们 可 以 举 一 个 最 简单 的 例子 证 明 “ 幽 灵 衬 白 节 点 ”确实 存在 ， CSS 和 HTML 代码 如 下 : 


div { 
background-color: #cd0000; 
} 
span { 
display: inline-block; 
} 


<div><span></span></div> 
结果 ， 此 <qdiv> 的 高 度 并 不 是 0， 而 是 如 图 3-29 所 示 有 高 度 。 
这 看 实 很 奇怪 ,内 部 的 <span> 元 素 的 宽 局 明明 都 是 0， 标 
签 之 间 也 没有 换行 人 符 之 类 的 嫌疑 ， 怎么 <div> 的 高 度 会 是 图 



























































3-29 中 所 示 的 18 像素 呢 ? 图 3-29 ”高 度 不 为 0 证 明 幽 灵 
作 早 的 驶 是 这 里 的 “幽灵 空白 节点 >”， 如 果 我 们 认为 在 空白 节点 的 存在 〈 和 截 自 
<span> 元 素 的 前 面 还 有 一 个 宽度 为 0 的 空白 字符 ， 是 不 是 一 heme 





切 就 解释 得 通 呢 ? 

当然 ， 为 何 高 度 是 18 像素 这 里 三 言 两 语 是 解释 不 清 的 ， 可 以 看 后 面 对 line-height 和 
vertical-align 的 深入 讲解 ， 这 里 只 是 为 了 证 明 “ 幽 灵 空 白 市 点 ”确实 是 存在 的 。 

虽然 说 “幽灵 空 日 方 点 ”是 我 自己 根据 CSS 的 特性 表现 起 的 一 个 非常 形象 的 名 字 ， 但 其 绝 不 
是 空中 楼 阁 、 信 口 胡 话 的 。 规 范 中 实际 上 对 这 个 “幽灵 空白 节点 ”是 有 提 及 的 ,“ 幽 姑 空 白 节 点 ” 
实际 上 也 是 一 个 盒子 ， 不 过 是 个 假想 盒 ， 名 叫 “strut”， 中 文 直译 为 “支柱 ” 是 一 个 存在 于 每 个 “ 行 
框 合子” 前面， 同时 具有 该 元 素 的 字体 和 行 局 属性 的 0 宽度 的 内 联 会 。 规 范 中 的 原文 如 下 : 



































Each line box starts with a zero-width Inline box with the element’s font and line 


height properties. We call that 1maginary box a “strut 
明日 “网 元 空白 节点 ”的 存在 是 理解 后 续 很 多 内 联 元 素 为 何 会 这 么 表现 的 基础 。 





第 4 章 
蔓 尺 寸 四 大 系 族 


盒 尺 寸 中 的 4 个 盒子 content box、padding box、border box 和 margin box 分 别 对 应 CSS 世 
界 中 的 content、padding、border 和 margin 属性 ， 我 把 这 4 个 属性 称 为 “ 盒 尺 寸 四 大 家 
族 ”， 下面 我 们 一 个 一 个 揭 开 “四 大 家 族 ” 鲜 为 人 知 的 一 面 。 


4.1 深 入 理解 content 


4.1.1 content 与 蔡 换 元 素 


1. 什么 是 蔡 换 元 素 

蔡 换 元 系 〈replaced element) 可 以 说 是 CSS 世界 中 的 另外 一 个 派系 。 

根据 “外 在 盒子 ”是 内 联 还 是 块 级 我 们 可 以 把 元 素 分 为 内 联 元 素 和 块 级 元 素 ， 而 根据 是 人 否 
其 有 可 办 换 内 容 ， 我 们 也 可 以 把 元 票 分 为 瞪 换 元 系 和 非 苦 换 元 系 。 那 什么 是 蔡 换 元 系 呢 ? 

蔡 换 元 素 ， 顾 名 思 义 ， 内 容 可 以 被 蔡 换 。 举 个 典型 的 例子 : 


<img src="1 .jpg"> 


如 果 我 们 把 上 面 的 1.jpg 换 成 2.jpg， 是 不 古 图 片 束 会 符 换 了 ? 

这 种 通过 修改 某 个 属性 值 呈现 的 内 容 束 可 以 被 蔡 换 的 元 素 就 称 为 “ 蔡 换 元 系 ”。 因此 ， 
<img>、<object>、<video>、<iframe> 或 者 表单 元 素 <textarea> 和 <input> 都 是 典型 
的 督 换 元 系 。 

和 蔡 换 元 系 除 了 内 容 可 符 换 这 一 特性 以 外 ， 还 有 以 下 一 些 特性 。 

(1) 内 容 的 外 观 不 受 页 面 上 的 CSS 的 影响 。 用 专业 的 话 讲 就 是 在 样式 表现 在 CSS 作 
用 域 之 外 。 如 何 更 改 兰 换 元 系 本 号 的 外 观 ? 需要 类 似 appearance 属性 ， 或 者 浏览 医 目 
身 其 器 的 一 些 样式 接口 ,例如 ::-ms-check{} 可 以 更 改 高 版 本 IE 浏览 器 下 早 复 选 框 的 内 
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间距 、 背 景色 等 样式 ， 但 是 直接 Input ltyBe=s cheekDcx ”| { } 却 无 法 更 改 内 间距 、 背 
景色 等 样式 。 

(2) 有 自己 的 尺寸 。 在 Web 中 ， 很 多 蔡 换 元 又 在 没有 明确 尺寸 设 定 的 情况 下 ， 其 默认 的 尺 
寸 〈 不 包括 边框 ) 是 300 像素 x150 像素 ， 如 <video>、<iframe> 或 者 <canvas> 等 ， 也 有 少 
部 分 蔡 换 元 素 为 0 像 系 ， 如 <img> 图 片 ， 而 表单 元 素 的 蔡 换 元 素 的 尺寸 则 和 浏览 器 有 关 ， 没 有 
明显 的 规律 。 

(3 ) 在 很 多 CSS 属性 上 有 自己 的 一 套 表 现 规则 。 比较 具有 代表 性 的 就 是 vertical-align 
属性 ， 对 于 蔡 换 元 素 和 非 蔡 换 元 素 ，vertical-align 属性 值 的 解释 是 不 一 样 的 。 比 方 说 
vertical-align 的 默认 值 的 baseline， 很 简单 的 属性 值 ， 基 线 之 意 ， 被 定义 为 字符 X 的 
下 边缘 ， 在 西方 语言 体系 里 近乎 闻 识 ， 几 乎 无 人 不 知 ， 但 是 到 了 和 蔡 换 元 际 那 里 就 不 适用 了 。 为 
什么 呢 ? 因为 蔡 换 元 素 的 内 容 往往 不 可 能 含有 字符 X， 于 是 答 换 元 素 的 基线 惑 被 便 生 生 定 义 成 
了 元 素 的 下 边 绿 。 

下 面 提 个 简单 问题 : 下 拉 框 <select> 是 不 是 奉 换 元 素 ? 答案 : 是 的 。 

我 们 可 以 对 照 一 下 “ 蔡 换 元 系 ” 的 一 些 特点 : 首先 ， 内 容 可 和 芍 换 ， 例 如 我 们 设置 multiple 
属性 ， 下 拉 直 接 变 成 了 展开 的 直选 多 选 模 式 ; 其 次 ， 基 本 样式 外 部 CSS 很 难 改变 ;最 后 ， 它 有 
自己 的 尺寸 ， 基 线 也 是 下 边缘 等 。 

2. 替换 元 素 的 默认 display 值 

所 有 的 蔡 换 元 聚 都 是 内 联 水 平 元 系 ， 也 束 是 蔡 换 元 素 和 蔡 换 元 素 、 符 换 元 系 和 文字 都 是 可 
以 在 一 行 显示 的 。 但 是 ， 稚 换 元 际 默 认 的 display 信 却 是 不 一 样 的 ， 见 表 4-1。 


表 4-1 各 个 替换 元 素 的 默认 display 属性 值 


<select> inline-block 
range|file <input> inline-block 
<button> inline-block 
<textarea> inline-block 


通过 对 比 发 现 ，IE 浏览 磺 和 Chrome 浏览 器 的 返回 值 都 是 一 样 的 ， 但 是 Firefox 浏览 右 在 
<textarea> 和 绝 大 多 数 类 型 的 <input> 元 素 上 却 是 返回 的 inline 而 不 是 inline-block,， 
这 其 实 是 一 个 很 奇怪 也 很 有 意思 的 现象 。 为 什么 说 奇怪 呢 ? 我 们 都 知道 下 面 两 种 按钮 元 叉 的 表 
示 方 法 尺 十 长相 是 一 模 一 样 的 : 
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<input type="button"” value=" 按 钮 "> 
<button type="button"> 按 钮 </button> 


但 是 在 Firefox 下 ， 前 者 的 display 属性 默认 值 是 ijnl1ine， 后 者 却 是 inline-block,， 很 自 
然 会 奇怪 明明 一 个 模子 里 出 来 的 ， 怎 么 会 有 这 个 区 别 呢 ? 

实际 上 ， 如 果 我 们 深入 探究 就 会 发 现 ， 似 乎 Firefox 浏览 器 在 蔡 换 元 素 的 内 联 表现 这 一 块 
还 是 有 些 目 己 的 想法 的 。 

首先 回答 一 下 这 个 疑问 : <input> 和 <button> 按 钮 的 区 别 在 什么 地 方 ? 区别 在 于 两 
种 按钮 默认 的 white-space 值 不 一 样 ， 前 者 是 pre， 后 者 是 normal， 所 表示 出 来 的 
现象 天 异 就 是 : 当 按 钮 文字 足够 多 的 时 候 ，<input> 按 钮 不 会 目 动 换行 ，<button> 投 钮 
则 会 。 

当然 ， 这 并 不 是 Firefox 浏览 融 下 两 种 按钮 默认 display 值 不 一 样 的 原因 ， 那 客 葛 是 什么 
原因 呢 ? 我 仔细 对 比 了 一 下 ， 发 现 没有 规律 可 言 ， 原 因 恐 但 只 有 浏览 磺 广 商 上 自己 才 知 道 了 。 当 
然 ， 抛 出 此 问题 的 目的 不 是 得 出 这 里 略 显 敷衍 的 答案 ， 而 古 为 了 引出 下 面 的 重要 和 内容， 也 残 是 : 
我 们 没有 必要 深究 为 什么 一 个 是 ijnline 一 个 是 inline-block, 因为 对 于 替换 元 素 而 言 ,这 
征 没有 意义 的 。 为 什么 这 么 议 呢 ? 蔡 换 元 素 有 很 多 表现 规则 和 非 华 换 元 素 不 一 样 ， 其 中 之 一 是 
宽度 和 高 度 的 尺寸 计算 规则 ， 人 简单 描述 一 下 就 是 ， 蔡 换 元 素 的 display 是 inline、block 
和 ijnline-block 中 的 任意 一 个 ， 其 尺寸 计算 规则 都 是 一 样 的 。 

3. 和 蔡 换 元 素 的 尺寸 计算 规则 

我 个 人 将 蔡 换 元 素 的 尺寸 从 内 而 外 分 为 3 类: 固有 尺寸 、HTML 尺寸 和 CSS 尺寸 。 

(1) 国有 尺寸 指 的 是 蔡 换 内 容 原本 的 尺寸 。 例 如 ， 图 片 、 视 频 作 为 一 个 独立 文件 存在 的 时 
候 ， 都 是 有 着 自己 的 宽度 和 高 度 的 。 这 个 宽度 和 高 度 的 大 小 就 是 这 里 的 “固有 尺寸 >。 对 于 表单 
类 蔡 换 元 素 ,“ 国 有 尺寸 ”可 以 理解 为 “不 加 修饰 的 默认 尺寸 "”” 比方 襄 ， 你 在 空 日 页 面 写 上 
<input>， 此 时 的 尺寸 就 可 以 看 成 是 <input> 元 系 的 “固有 尺寸 "。 这 就 是 输入 框 、 下 拉 框 这 
些 表单 元 素 默 认 的 font-size/padding/margin 等 属性 全 部 使 用 Px 作为 单位 的 原因 ,因为 
这 样 可 以 保证 这 些 元 双 的 “固有 尺寸 ”是 固定 大 小 ， 不 会 受 外 界 CSS 的 影响 。 

(2) HTML 尺寸 这 个 概念 略微 抽象 ， 我 们 不 妨 将 其 想象 成 水 者 香里 面 的 那 一 层 白 色 的 膜 ， 
里 面 是 “固有 尺寸 ”这 个 蛋黄 蛋白， 外 面 是 “CSS 尺寸 ”这 个 重 达 。“HTML 尺寸 ”只 能 通过 
HTML 原生 属性 改变 ， 这 些 HTML 原生 属性 包括 <img> 的 width 和 height 属性 、<input> 
的 size 属性 、<textarea> 的 cols 和 rows 属性 等 。 










































































<img width="300" height="100"> 

<input type="file" size="30"> 

<textarea cols="20™ rows="5></textarea> 

(3) CSS 尺寸 特 指 可 以 通过 CSS 的 width 和 height 或 者 max-width/min-widtnh 和 
max-height/min-height 设置 的 尺寸 ， 对 应 全 尺寸 中 的 content box。 

可 以 影响 替换 元 素 尺寸 的 3 层 结构 如 图 4-1 所 示 。 这 3 层 结构 的 计算 规则 具体 如 下 。 


如 果 没 有 CSS 尺寸 和 HTML 尺寸 ， 则 使 用 回 有 尺寸 作为 最 终 的 宽 高 。 例 如 ， 下 面 的 
HTML 代码 : 


<img src="1.jJpg"> 


Fr-------” 








假设 1.jpg 这 张 图 片 原 尺寸 是 256x : 局 部 放大 Rs 

192， 则 在 页 面 中 此 图 所 呈现 的 宽 高 人 ~、 、 ey 
就 是 256 像素 x192 像素 。 a 

如 果 没 有 CSS 尺寸 , 则 使 用 HTML 国有 六 1 
尺寸 作为 最 终 的 需 高 。 仍 以 图 片 

举例 : 图 4-1 替换 元 素 的 3 层 尺寸 结构 示意 


<img src="1.jJpg" width="128" height="96"> 


我 们 通过 HTML 属性 widtn 和 height 限定 了 图 片 的 HTML 尺寸 ， 因 此 ， 最 终 图 片 
所 呈现 的 宽 高 就 是 128 像素 x96 像素 。 
如 果 有 CSS 尺寸， 则 最 终 尺 寸 由 CSS 属性 决定 。 我 们 继续 上 面 的 例子 : 


ijmg { width: 200px; height: 150px; } 
<img src="1.jJpg" width="128" height="96"> 


此 时 固有 尺寸 、HTML 尺寸 和 CSS 尺寸 同时 存在 ， 起 作用 的 是 CSS 属性 限定 的 尺寸 ， 
因此， 最 终 图 片 所 呈现 的 客 高 就 是 200 像素 x150 像素 。 

如 果 “ 固 有 尺寸 ” 含有 固有 的 宽 高 比例 ， 同 时 仅 设 置 了 宽度 或 仅 设置 了 高 度 ， 则 元 素 依 
然 按照 国有 的 筑 高 比例 显示 。 我 们 还 是 拿 图 片 举例 ， 例 如 ， 下 面 的 CSS 和 HTML 代码 : 


img { width: 200px; } 
<img src="1.jpg"> 


虽然 CSS 中 仪 仅 设 置 了 widtn, 但 图 片 这 种 玲 换 元 系 的 资源 本 映 上 共有 特定 的 宽 蜗 比例 ， 
因此 ，height 也 会 等 比例 计算 。 所 以 ， 最 终 图 片 所 呈现 的 宽 高 就 是 200 像素 x150 像 
素 (150 = 200 x192 /256)。 

如 果 本 例子 仅 设 置 neignt :150px， 最 后 的 结果 也 是 这 样子 。 

如 果 上 面 的 条 件 都 不 符合 , 则 最 终 宽度 表现 为 300 像素 , 高 度 为 150 像素 , 宽 高 比 2:1。 
例如 : 


<video></video> 


在 所 有 现代 浏览 费 下 的 尺寸 表现 部 十 300 像 系 x150 像素 。 
内 联 葵 换 元 素 和 块 级 蔡 换 元 素 使 用 上 面 同一 套 矿 十 计算 规则 。 例 如 : 


img { display: block; } 





























<img src="1.jJpg"> 


虽然 图 片 此 时 变 成 了 块 级 ， 但 是 尺寸 规则 还 是 和 内 联 状态 下 一 致 ， 因 此 ， 图 斤 呈 现 的 
览 融 还 是 256 像素 x192 像素 。 这 也 是 为 何 图 片 以 及 其 他 表单 类 谷 换 元 素 设置 di splay: 
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block 宽度 却 没有 100% 容 器 的 原因 。 
如 果 单 看 规则 ， 似 乎 面面俱到 ， 无 懈 可 击 。 但 是 ， 实 际 上 ， 意 外 还 是 发 生 了 ， 这 个 意外 就 
是 最 香 用 的 <img> 元 么 。 如 果 任 何 尺 寸 都 没有 ， 则 元 又 应 该 是 300 像素 x150 像素 ， 这 条 规则 
<viqdqeo>、<canvas> 和 <iframe> 这 些 元 系 都 符合 ， 唯 独 图 片 例 外 。 如 下 : 


Margin 


<img> 

这 段 HTML 表示 一 个 没有 蔡 换 内 容 也 没有 尺寸 设 
定 的 裸露 的 <img> 元 素 。 按 照 规范 尺寸 应 该 是 300 像素 x 
150 像 际 ， 结 果 不 仅 不 是 这 个 尺寸 ， 而 且 各 个 浏览 器 下 
的 尺寸 还 不 一 样 ,IE 浏览 器 下 是 28x30, 如 图 4-2 所 示 。 
Chrome 浏 贤 器 下 是 0x0， 如 图 4-3 所 示 。Firefox 浏览 
器 下 显示 的 是 0x22， 如 图 4-4 所 示 。 














图 43 ”Chrome 浏览 器 图 片 默认 尺寸 图 4-4 ”Firefox 浏览 器 图 片 默 认 尺 寸 


其 实 尺 寸 不 一 样 不 打 紧 ， 因 为 我 们 平时 使 用 都 会 设置 尺寸 , 不 可 能 像 这 样 放 任 不 管 , 但 是 ， 
如 果 表 现 型 也 不 一 样 ， 那 束 兵 烦 了 。 我 们 从 一 个 常用 功能 的 前 端 小 技巧 说 起 。 

Web 开发 的 时 候 ， 为 了 提高 加 载 性 能 以 及 节约 带 需 费用 ， 前 屏 以 下 的 图 片 束 会 通过 深 屏 加 
载 的 方式 卉 步 加 载 ， 然 后 ， 这 个 即将 被 异步 加 载 的 图 片 为 了 布局 稳健 、 体 验 民 好 ， 往 往 会 使 用 
一 张 透明 的 图 片 后 位 。 例 如 ; 


<img src="transparent .png"> 

实际 上 ， 这 个 透明 的 占 位 图 片 也 是 多 余 的 资源 ， 我 们 直接 : 
<img> 

然后 配合 下 面 的 CSS 可 以 实现 一 样 的 效果 : 


img { visibility: hidden; } 
img[src] { visibility: visible; } 


注意 ,这 里 的 <img> 直 接 没 有 src 属性 ， 再 强调 一 过 , 是 直接 没有 , 不 是 src="", src="" 
在 很 多 浏览 右 下 依然 会 有 请 求 ， 而 且 请 求 的 是 当前 页 面 数 据 。 当 图 片 的 src 属性 缺 省 的 时 候 ， 
图 片 不 会 有 任何 请 求 ， 是 最 高 效 的 实现 方式 。 





理论 再 次 无 筝 可 击 ， 然 而 ， 正 如 之 前 提 到 的 ,“ 似 乎 Firefox 浏 跑 右 在 蔡 换 元 系 的 内 联 表现 
这 一 块 还 是 有 些 自己 的 想法 的 ”对 于 Firefox 浏览 器 ，src 缺 省 的 <img> 不 是 替换 元 素 ， 而 是 
一 个 普通 的 内 联 元 素 , 所 以 使 用 的 束 不 是 蔡 换 元 系 的 尺寸 规则 , 而 是 类 似 <span> 的 内 联 元 素 尺 
寸 规则 ， 宽 高 会 无 效 。 因 此 : 

img { width: 200px; height: 150px; } 

<img> 

在 正和 Chrome 浏览 左下 都 按照 预期 图 乒 尺 寸 200 像 系 x150 像 系 ， 但 是 ，Firefox 浏览 姨 却 
纹 丝 不 动 ， 依 然 是 默认 图 片 尺 寸 ， 这 天 比较 尴 类 了 ， 好 在 要 修复 此 兼容 性 问题 很 简单 ， 只 需 直 接 
设置 : 

img { display: inline-block; } 

就 理解 为 <span> 标 签 设置 display:inline-block 后 可 以 设置 宽 高 就 可 以 了 。 这 个 针 
对 Firefox 浏览 器 的 修复 既 有 效 ， 又 对 其 他 浏览 器 的 图 片 表现 没有 任何 影响 ， 因 此 ， 我 建议 在 
CSS 重 置 的 时 候 加 上 下 面 这 行 : 

img { display: inline-block; } 

接 下 来 ， 我 们 继续 深入 玲 换 元 素 的 尺寸 规则 。 

CSS 世界 中 的 蔡 换 元 素 的 固有 尺寸 有 一 个 很 重要 的 特性 ， 那 就 是 “我 们 是 无 法 改变 这 个 替 
换 元 素 内 容 的 国有 尺寸 的 ”。 

我 们 平常 打交道 的 图 片 的 尺寸 规则 是 “默认 的 宽 高 设置 会 覆盖 回 有 尺寸 >， 因 此 ， 我 们 可 
能 会 误 认 为 我 们 的 宽 高 设置 修改 的 是 图 片 的 固有 尺寸 ， 实 际 上 并 不 是 。 要 证 明 这 一 观点 ， 我 们 
可 以 傍 助 非 蔡 换 元 素 的 : :before 或 : :after 伪 元 素 。 人 例如， 如果 有 下 面 的 代码 : 


div:before { 





























content: url(1.jp9g); 

display: block; 

width: 200px; height: 200px; 
} 


此 时 : :before 伪 元 素 呈 现 的 图 片 的 宽 高 是 多 少 ? 

很 多 人 会 按照 经 验 认为 是 200 像 了 系 x200 像素 ， 非 也 ! 实际 上 ， 这 里 的 图 片 尺 寸 是 1. jpg 
这 张 图 片 的 原始 尺寸 大 小 256 像素 x192 像 系 ，widtnh 和 heignt 属性 都 被 直接 无 视 了 。 这 吏 
是 我 上 面 所 说 的 ， 在 CSS 世界 中 ， 图 片 资源 的 固有 尺寸 是 无 法 改变 的 ! 

眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-1.php 或 者 扫 右 侧 的 二 
维 人 码 。 

可 以 看 到 图 片 是 按照 原始 尺寸 展示 的 (如 图 4-5 所 示 )， 并 不 是 CSS 设 
定 的 200 像素 x200 像素 , 200 像素 仅仅 是 设 定 了 content box 尺寸 ,对 content 
生成 图 片 资源 并 没有 任何 影 啊 。 

我 们 再 回 到 <img> 元 又 ,既然 图 片 的 固定 尺寸 不 受 CSS 和 宽 高 控制 , 那 为 何 我 们 设 定 wiadth 
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和 height 会 影响 图 片 的 尺寸 呢 ? 

我 就 不 卖 关 子 了 ， 那 是 因为 图 片 中 的 content 替换 内 容 默 认 的 适 配 方 式 是 填充 (fi11)， 
也 就 是 外 部 设 定 的 尺寸 多 大 ， 我 就 填 满 、 跟 着 一 样 大 。 换 人 句 话说 ， 尺 寸 变 化 的 本 质 并 不 是 改变 
回 有 尺寸 ， 而 是 米 用 了 填充 作为 适 配 HTML 尺寸 和 CSS 尺寸 的 方式 ， 且 在 CSS3 之 前 ， 此 适 配 
方式 是 不 能 修改 的 。 

在 CSS3 新 世界 中 ，<img> 和 其 他 一 些 蔡 换 元 素 的 茶 换 内 容 的 适 配 方式 可 以 通过 
object-fit 属性 修改 了 。 例如 ，<img> 元 素 的 默认 声明 是 opject-fit:fi1l1， 如 果 我 们 设 
置 opject-fit :none， 则 我 们 图 片 的 尺寸 就 完全 不 受 控制 ， 表 现 会 和 非 蔡 换 元 系 : :before 
生成 的 图 片 尺 寸 类 似 ， 如 果 我 们 设置 object-fit:contain， 则 图 片 会 以 保持 比例 图 片 ， 尽 
可 能 利用 HTML 尺寸 但 又 不 会 超出 的 方式 显示 ， 有 些 类 似 于 packground-size:contain 
的 呈现 原理 ， 如 果 此 时 我 们 设 定 <img> 元 素 的 width 和 height 都 是 200 像素 ， 则 会 呈现 图 
4-6 所 示 的 目 动 牌 直 居 中 效 末 。 

















图 4-5 ”content 生成 的 图 片 宽 高 设置 无 效 图 4-6 object-fit:contain 下 的 图 片 效 果 

object-fit 还 有 其 他 一 些 属 性 值 ， 但 本 书 不 会 展开 介绍 CSS3 内 容 ， 因 此 点 到 为 止 ， 有 
兴趣 的 读者 可 以 读 我 的 博客 文章 : http://www.zhangxinxu.com/wordpress/?p=4676。 

4. 答 换 元 素 和 非 蔡 换 元 素 的 距离 有 多 远 

图 片 可 以 说 是 最 典型 最 钊 用 的 蔡 换 元 际 了 了， 因此 ， 本 节 依 然 以 网 片 为 代表 来 深入 蔡 换 元 叉 
的 “内 心 世界 ”。 

仙 侠 小 说 世界 中 有 正道 和 碎 道 ， 看 似 势 不 两 立 ， 但 其 实 并 无 本 质 差 别 ， 稍 不 留神 可 能 惑 会 
变 成 魔道 中 人 。CSS 世界 中 的 蔡 换 元 素 和 非 蔡 换 元 又 看 上 去 也 是 两 个 对 立 的 派别 ， 立 场 清 晰 ， 
区 分 明显 ， 老 死 不 相 往 来 的 感觉 ， 但 是 ， 一 旦 深入 研究 我 们 就 会 发 现 ， 两 者 之 间 的 距离 要 比 我 
们 所 有 人 想象 得 都 要 近 ! 

观点 1: 替换 元 素 和 非 替 换 元 素 之 间 只 隔 了 一 个 src 属性 ! 

由 于 我 们 平时 使 用 图 片 肯定 都 会 使 用 src 属性 ， 所 以 难免 会 思维 定式 ， 认 为 <img> 等 同 于 
图 片 ， 实 际 上 完全 不 是 的 。 如 果 我 们 把 src 属性 去 挥 ，<img> 其 实 束 是 一 个 和 <span> 类 似 的 
普通 的 内 联 标签 ， 也 就 是 成 了 一 个 非 珍 换 元 素 。 

非常 有 想法 的 Firefox 浏览 右 很 好 地 证 实 了 这 一 点 。 例 如 ， 对 于 以 下 CSS 和 HTML 代码， 











img { 
display: block; 
outline: lpx solid; 
} 
<img> 
按照 答 换 元 素 的 尺寸 规则 ， 宽 度 应 该 是 0， 但 实际 上 ， 在 Firefox 浏览 右 下 ， 最 终 的 宽度 是 
100% 目 适应 父 容器 的 可 用 宽度 的 。 其 表现 和 普通 的 <span> 类 似 ， 已 经 完全 不 是 奉 换 元 素 了 。 
大 家 应 该 都 知道 ,<span> 标 签 设 置 wigdth 和 height 是 无 效 的 ,所 以 大 家 应 该 明白 为何 Firefox 
浏览 器 下 <img> 设 置 width 和 height 不 起 作用 了 吧 。 
Firefox 浏览 器 的 案例 很 好 地 证 明了 “如 果 图 片 没 有 替换 内 容 ， 图 片 吏 古 一 个 普通 的 Wl ” 
Chrome 浏览 器 其 实 也 有 类 似 的 表现 , 只 是 需要 特定 的 条 件 触发 而 已 , 这 个 触发 条 件 束 是 
要 有 不 为 空 的 alt 属性 值 。 例 如 : 


<img alt=" 任 意 值 "> 


此 时 ，Chrome 这 个 <img> 宽 度 也 是 100% 容 器 。 假设 我 们 容器 宽度 470 像素 ， 则 效果 就 是 图 4-7 
所 示 的 样子 。 完 全 就 是 非 蔡 换 元 际 的 表现 吧 。 

但 是 ， 如 果真 是 这 样 ， 那 为 何 IE 浏览 器 没有 src 属性 还 是 完全 的 蔡 换 元 素 表 现 呢 ?原因 
瓯 在 于 IE 浏览 器 中 有 个 默认 的 占 位 蔡 换 内 容 ， 当 src 属性 缺失 的 时 候 ， 会 使 用 这 个 默认 的 占 
位 内 容 ， 这 也 是 正 浏览 器 ee 28x30 而 不 像 Chrome 浏览 器 那样 为 0x0 的 原因 
所 在 。 企 融 版 本 的 下 浏览 左下 ， 这 个 占 位 的 人 蔡 换 内 容 似乎 做 了 透明 处 理 ， 但 是 ， 在 原生 的 IE8 
浏览 器 下 ， 这 个 占 位 内 容 却 全 然 骏 露 了 ， 见 网 4-8。 


图 4-7 容 堪 宽度 470 像素 的 效果 图 4-8 下 浏览 喜 <img> 占 位 内 容 


大 家 仔细 观察 会 发 现 此 占 位 内 容 中 那个 图 乒 的 小 图 标 是 完整 的 , 不 是 图 片 src 不 合法 出 现 
的 破裂 小 图 标 或 者 带 又 号 的 图 标 ， 需 要 注意 区 别 ， 别 混 消 了 。 

男 外 一 个 可 以 很 好 证 明 “ 葵 换 元 素 和 非 蔡 换 元 系 区 别 就 在 于 src 属性 ”的 点 是 “ 基 
于 伪 元 系 的 图 厂 内 容 生 成 技术 ”。 用 一 句 更 易 异 的 话 摘 述 就 是 ， 我 们 可 以 对 <img> 元 素 使 
用 : :before 和 ::after 伪 元 素 进 行内 容 生 成 以 及 样式 构建 但 是 这 种 方法 文 持 是 有 限 
制 的 。 首 先是 兼容 性 问题 ， 根 据 我 的 测试 ， 目 前 Chrome 和 Firefox 等 浏览 器 文 持 ， 但 IE 
浏览 器 不 文 持 ; 其 次 ， 要 想 让 Chrome 或 Firefox 等 浏览 右 生 效 ， 还 有 其 他 一 些 需要 注意 的 
技术 点 。 

(1) 不 能 有 src 属性 (证 明 观 点 的 关键 所 在 ); 

(2) 不 能 使 用 content 属性 生成 图 片 〈 针 对 Chrome ); 

(3) 需要 有 alt 属性 并 有 值 〈 针 对 Chrome ); 
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(4) Firefox 下 : :before 伪 元 素 的 content 值 会 被 无 视 ，: :after 无 此 问题 ， 应 该 与 
Firefox 目 己 占用 了 : :before 伪 元 系 的 content 属性 有 天。 

虽然 “基于 伪 元 素 的 图 片 内 容 生 成 技术 ”并 不 属于 实用 技术 , 但 是 ， 实际 网 页 开发 的 时 候 ， 
会 有 一 些 场景 必须 使 用 <img> 标 签 ， 此 时 ， 这 些 隐蔽 的 技术 往往 就 会 有 神 迹 表现 。 我 这 里 举 个 
小 例子 抛砖引玉 一 下 ， 上 一 人 小节 提 到 使 用 缺 省 src 的 <img> 元 素 实 现 深 屏 加 载 效 果 ， 但 是 ， 刺 
有 可 能 存在 这 样 一 个 体验 问题 : 如 果 我 们 的 JavaScript 加 载 比 较 慢 ， 我 们 的 页 面 就 很 有 可 能 
现 一 块 一 块 白色 的 图 片区 域 ， 纯 白色 的 ， 没 有 任何 信息 ， 用 户 完 全 不 知道 这 里 的 内 容 是 什么 。 
虽然 alt 属性 可 以 提供 描述 信息 ,但 由 于 视觉 效果 不 好 ， 被 隐藏 择 了 。 此 时 ， 我 们 总 不 免 畅想 : 
要 是 在 图 片 还 没 加 载 时 就 把 alt 信息 呈现 出 来 该 多 好 啊 。 

茶 喜 你 可 以 美梦 成 真 ! 办 法 就 是 使 用 这 里 的 “基于 伪 元 妹 的 图 片 内 容 生 成 技术 ”。 

在 Chrome 或 Firefox 浏 贤 絮 下 访问 http://demo.cssworld.cn/4/ 
1-2.php。 进 入 此 演示 页 面 ， 我 们 鼠标 经 过 中 间 的 色 块 区 域 的 时 候 
会 发 现 ， 有 一 个 带 有 文字 信息 的 半 透 明 黑 色 条 目 出 现 了 ,如 图 4-9 
































所 示 。 
此 时 ， 图 片 src 没有 ， 因 此 ，: :before 和 : :after 可 以 

生效 ， 我 们 就 可 以 把 alt 属性 值 通过 content 属性 呈现 出 来 ， EE 

SHE 4.9 alt 信息 美美 地 显示 


img: :after ({ 
/* 生成 alt 信息 */ 
content: attr(alt); 
/* 尺寸 和 定位 */ 
position: absolute; bottom: 0; 
widthn: 100%; 
background-color: rgba(0,0,0,.5);} 
transform: translateY (100%); 
/* 来 点 过 渡 动 画 效果 */ 
transition: transform .2s; 

} 

img:hover: :after { 
/* alt 信息 显示 */ 
transform: translateY (0); 


} 
下 面 古 此 技术 最 有 意思 的 部 分 。 当 我 们 点 击 按钮 给 图 片 添 








加 一 个 src 地 址 时 ， 图 片 从 普通 元 素 变 成 替换 元 素 ， 原 本 都 还 be 
支持 的 : :before 和 ::after 此 时 全 部 无 效 , 此 时 再 hnover 图 从 
片 ， 是 不 会 有 任何 信息 出 现 的 〈 见 几 4-10)。 于 是 就 非常 巧妙 地 








增强 了 图 片 还 没 加 载 时 的 信息 展示 体验 。 [sse 
细 细 体味 会 发 现 , 这 一 体验 增强 实现 非常 巧妙 地 利用 了 名 。10 属性 在 碟 时 候 
莹 换 元 素 的 各 种 特性 表现 ,并 且 在 HTML 层面 并 没有 任何 其 。 ;before/:after 失效 
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他 代码 或 内 容 的 辅助 ， 可 谓 是 非常 高 性 价 比 的 技术 实现 ， 大 家 不 妨 在 自己 的 项 目 中 小 试 
ER 

观点 2: 替换 元 素 和 非 替 换 元 素 之 间 只 隔 了 一 个 CSS content 属性 ! 

蔡 换 元 素 之 所 以 为 丛 换 元 素 , 束 是 因为 其 内 容 可 人 瞪 换 , 而 这 个 内 容 就 是 margin、border、 
padding 和 content 这 4 个 盒子 中 的 content box， 对 应 的 CSS 属性 是 content， 所 以 ， 从 
理论 层面 讲 ，content 属性 决定 了 是 蔡 换 元 素 还 是 非 答 换 元 素 。 

理论 太 虚 ， 我 们 还 是 看 一 些 有 趣 的 真实 案例 吧 。 在 开始 之 前 ， 我 们 需要 感谢 Chrome 浏览 
器 ，Chrome 浏览 占 的 泻 染 表 现 帮 助 我 们 更 好 地 理解 了 蔡 换 元 素 。 什 么 表现 呢 ? 束 是 在 Chrome 
浏览 器 下 ,所 有 的 元 素 都 文 持 content 属性 , 而 其 他 浏览 器 仅 在 : :before/: :after 伪 元 取 
中 才 有 文 持 。 因 此 ， 下 面 的 所 有 索 例 ， 请 在 Chrome、Safari、Opera 等 浏览 船 下 得 看 。 

前 面 已 经 证 明了 ,没有 src 属 性 的 <img> 是 非 瞧 换 元 素 , 但 是 , 如 采 我 们 此 时 使 用 content 
属性 给 它 生 成 一 张 图 片 呢 ? 


img { content: url(1.jpg); } 





<img> 
结果 和 下 面 HTML 的 视觉 效果 一 模 一 样 : 
<img src="1.jpg"> 
眼见 为 实 ， 手动 输 入 http://demo.cssworld.cn/4/1-3.php 或 者 扫 下 面 的 二 维 码 。 结 果 图 片 都 正 


第 显示 了 ， 如 图 4-11 所 示 ， 且 各 种 表现 都 符合 蔡 换 元 素 ， 如 尺寸 规则 ,或 者 不 文 持 : :before/ 
: :after 伪 元 素 等 。 





1. 常规 实现 2. content 属 性 实现 


<img src="1.jpg"> <img> 


img:not([src]) { 
content: url(1.jpg); 


| 





4-11 content 属性 直接 生成 图 片 演 示 截 图 
另外 还 有 一 点 很 有 意思 ， 如 果 图 片 原来 是 有 src 地 址 的 , 我 们 也 是 可 以 使 用 content 属性 把 
图 片 内 容 给 置换 挥 的 ， 于 是 ， 我 们 就 能 轻松 实现 nover 图 片 变 成 另外 一 张 图 片 的 效果 。 例 如 : 


<img src="laugh.png"> 
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img:hover { 
content: url(laugh-tear.png); 


} 

实例 可 以 手动 输入 http://demo.cssworld.cn/4/1-4.php 或 者 扫 下 面 的 二 维 码 访问 。 该 实例 中 ， 
我 们 鼠标 经 过 笑脸 ， 笑 脸 会 斋 出 眼泪 ( 见 图 4-12)， 束 是 通过 CSS 的 content 属性 直接 蔡 换 
<img> 的 蔡 换 内 容 实 现 的 ,要 是 放 在 以 前 ,我 们 只 能 借助 packground-image 或 者 两 个 <img> 
元 素 显 隐 控 制 实现 。 











图 4-12 鼠标 经 过 变 成 笑 泪 图 片 





然后 ,， 还 有 一 点 有 必要 说 明 一 下 ，content 属性 改变 的 仅仅 是 视 沉 呈现 ， 当 我 们 以 右键 或 
其 他 形式 保存 这 张 图 片 的 时 候 ， 所 保存 的 还 是 原来 src 对 应 的 图 片 。 

不 仅 如 此 ， 使 用 content 属性 ， 我 们 还 可 以 让 普通 标签 元 素 变 成 丛 换 元 素 。 举 个 例 于 ， 宣 
网 的 标志 往往 都 会 使 用 <h1> 标 签 ， 里 面 会 有 网 站 名 称 和 标志 图 片 使 用 背景 图 ， 类 似 下 面 的 代码 : 








<hl> 《CSSs 世界 》</h1> 
hl { 
width: 180px; 
height: 36px; 
background: url(logo.png); 
/* 隐藏 文字 */ 
text-indent: -999px; 
} 


下 面 展示 一 个 创新 的 方法 ， 大 家 可 以 在 移动 问 试 试 。 还 是 一 样 的 HTML 代码 ， 但 是 CSS 
代码 微调 了 一 下 : 


hil { 
content: url(logo.png); 


} 

没 错 ， 只 要 一 行 CSS 就 可 以 实现 我 们 想 要 的 效果 了 。 为 了 证 明 我 不 是 在 打 诈 语 ， 我 特意 制 
作 了 演示 页 面 ， 可 以 手动 输入 http://demo.cssworld.cn/4/1-5.php 或 者 扫 下 面 的 二 维 码 。 效 果 如 图 
4-13 所 示 ， 可 以 看 到 没有 文字 ， 只 有 图 卢 。 








《KKss- 世 社 》 


4-13 ”content 轻松 实现 文字 变 图 片 











我 们 简单 分 析 一 下 : 传统 CSS 代码 的 <h1> 是 一 个 普通 元 素 ， 因 此 需要 设 定 尺 寸 隐藏 文字 ; 
但 是 ， 后 面 使 用 content 属性 实现 ，<h1> 分 分 钟 就 变 成 了 替换 元 素 ， 文 字 自 动 被 奉 换 ， 同 时 
斥 寸 规则 不 是 符 换 元 素 的 尺寸 规则 ， 完 美 适 应 原始 图 片 大 小 。 

此 外 ， 虽 然 视觉 上 文字 被 蔡 换 了 ， 但 是 屏幕 阅读 设备 阅读 的 还 是 文字 内 容 ， 搜 索引 擎 SEO 
抓 取 的 还 是 原始 的 文本 信息 ， 因 此 ， 对 页 面 的 可 访问 性 等 没有 任何 影响 。 看 起 来 这 是 一 个 完美 
的 文字 换 图 显示 方案 ， 但 还 是 有 一 些 局 限 。 前 文 也 说 到 了 ， 蔡 换 元 素 的 回 有 尺寸 是 无 法 设置 的 ， 
如 今 在 移动 端 retina 屏幕 儿 乎 是 标 配 ， 为 了 图 片 显示 细 肛 ， 往 往 真 实 图 乒 尺 寸 是 显示 图 片 尺 十 
的 两 倍 。 于 是 问题 就 来 了 ， 使 用 content 生成 图 片 ， 我 们 是 无 法 设置 图 片 的 尺寸 的 ， 只 能 迫 
不 得 已 使 用 一 倍 图 ， 然 后 导致 图 片 看 上 去 有 点 儿 模 糊 。 

所 以 ， 要 想 在 移动 并 使 用 该 技术 ， 建 议 使 用 SVG 矢量 图 片 。 例 如 : 

hl 1 


content: url(logo.svg); 


} 


好 了 , 最 后 和 标题 再 呼应 下 , 蔡 换 元 系 和 非 蔡 换 元 和 又 的 距离 有 多 远 ? 束 是 src 或 content 
对 

5. content 与 蔡 换 元 素 关 系 削 析 

从 前 一 节 大 家 一 定 早 就 看 出 content 属性 和 蔡 换 元 系 之 间 有 痢 非 常 微妙 的 联系 了 。 实 际 上 , 在 
CSS 世界 中 ， 我 们 把 content 属性 生成 的 对 象 称 为 “匿名 符 换 元 素 ”(anonymous replaced element)。 
看 到 没 ， 和 直接 就 “ 蔡 换 元 系 ” 岂 起 来 了 ， 可 见 ， 它 们 之 间 的 联系 并 不 是 微妙 ， 而 是 赤裸 神 。 

content 属性 生成 的 内 容 都 是 蔡 换 元 系 ? 没 错 ， 网 是 奉 换 元 素 ! 

也 正 是 这 个 原因 ，content 属性 生成 的 内 容 和 普通 元 素 内 容 才 会 有 很 多 不 同 的 特性 表现 。 
我 这 里 举 几 个 简单 的 例子 。 

(1) 我 们 使 用 content 生成 的 文本 是 无 法 选中 、 无 法 复制 的 ， 好 像 设 置 了 user- 
select :none 声明 一 般 ， 但 是 普通 元 素 的 文本 却 可 以 被 轻松 选中 。 同 时 ，content 生成 的 文 
本 无 法 被 屏 硕 阅读 设备 读 取 ， 也 无 法 被 搜索 引擎 抓 取 ， 因 此 ， 和 干 万 不 要 自以为是 地 把 重要 的 文 
本 信息 使 用 content 属性 生成 , 因为 这 对 可 访问 性 和 SEO 都 很 不 友好 ，content 属性 只 能 用 
来 生成 一 些 无 关 紧 要 的 内 容 ， 如 装饰 性 图 形 或 者 序号 之 类 ; 同样 ， 也 不 要 担心 原本 重要 的 文字 
信息 会 被 content 蔡 换 ， 稚 换 的 仅仅 是 视觉 层 。 

这 里 有 人 可 能 会 反驳 : content 内 容 无 法 复制 也 可 能 是 伪 元 系 的 原因 ， 而 不 是 人 答 换 元 素 的 原 
因 。 要 回答 这 个 问题 ， 我 们 可 以 将 其 与 同样 是 殖 换 元 素 的 : :first-letter 对 比 一 下 。 在 下 和 
Firefox 浏览 器 下 ，: : first-letter 伪 元 素 内 容 都 是 可 以 被 选中 的 ， 但 是 : :before/::after 
内 容 却 无 法 选中 。 由 此 可 见 ， 文 字 无 法 选中 多 半 是 content 的 原因 ， 而 非 伪 元 素 。 

(2) 不 能 左右 :empty 伪 类 。:empty 是 一 个 CSS 选择 器 ， 当 元 素 里 面 无 内 容 的 时 候 进行 
匹配 。 例 如 ， 下 面 的 HIML 和 CSS 代码 : 


<div> 有 内 容 </div> 
<div></div> 
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div { padding: lO0px; border: 10PX solid #cd0000; } 
div:empty { border-style: dashed; |} 


前 面 一 个 <div> 是 实 线 边框 ， 而 后 面 的 ， 因 为 里 面 无 内 容 ， 所 以 就 是 虚线 边框 。 
接 下 来 ， 我 们 使 用 content 属性 给 <qiv> 生 成 一 些 文字 ， 例 如 : 
div::after { content: " 伪 元 素 生 成 内 容 "; } 


结果 看 上 去 好 像 <div> 里 面 出 现 了 文字 内 容 ,实际 上 , 还 是 当成 了 :empty,， 最 终 效果 如 图 4-14 
所 示 ， 是 一 个 虚 框 。 手 动 输入 http://demo.cssworld.cn/4/1-6.php 或 者 扫 下 面 的 二 维 码 。 
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4-14 ”content 无 法 影响 :empty 选择 需 





(3) content 动态 生成 值 无 法 获取 。content 是 一 个 非常 强大 的 CSS 属性 ， 其 中 一 个 强 
大 之 处 就 是 计数 器 效 果 ， 可 以 目 动 宗 加 数值 ， 例如， 图 4-15 








中 的 数字 3 就 是 content 动态 生成 的 (具体 参考 4.1.2 节 计 . 四 哈 根 达 斯 
米 立 ， 辐 和 路 雪 Wwall s 
数 姻 部 分 )。 _ 目 八 吉 冰 湛 洒 
六 心 CSS 代码 如 下 : . 国 DQ 冰 淇 淋 
核 代码 如 下 
.total: :after { 6. 这 告 举 水 洪 淋 
tent: counter (icecream); et ee 
2 " . 图 乐 可 可 冰淇淋 
| 9. 了 上品 新 城市 冰淇淋 


明 ; 台 MEUI 


我 们 是 无 法 获得 此 时 content 对 应 的 具体 数值 是 多 少 
的 ， 一 点 儿 办 法 都 没有 。 getComputedStyle 方法 可 以 获 
得 伪 元 素 的 计算 样式 。 但 是 ， 得 到 的 只 是 纯粹 的 content ”图 4-15 content 属性 动态 生成 数 全 
在 CSS 文件 中 的 属性 值 。 例 如 ， 这 里 : 


Var dom = document .querySelector(".total"), 





你 总 共 选 择 了 3 款 冰 淇 淋 ! 








window.getComputedStyle(dom , "::after") .Content， // 结果 是 : "counter (icecream)" 


结果 是 "counter (icecream)"， 而 不 是 数值 3。 
当然 ，content 后 成 内 容 还 有 其 他 很 多 和 普通 元 素 不 一 样 的 特性 ,就 不 一 一 介绍 了 ,我 们 
不 妨 把 更 多 注意 力 放 在 下 一 节 内 容 上 ， 即 与 content 属性 相关 的 实用 技术 。 


4.1.2 content 内 容 生 成 技术 


在 实际 项 目 中 , content 属性 几乎 都 是 用 在 : :before/::after 这 两 个 伪 元 素 中 ， 
因此 ,“content 内 容 生 成 搁 术 ”有 时 候 也 称 为 “: :before/::after 伪 元 系 搁 术 ”。 

提前 说 明 一 下 ， 因 为 本 书目 标 浏 览 器 是 IE8 及 以 上 版 本 浏览 器 ， 而 IE8 浏览 器 仅 支 持 单 冒 
号 的 伪 元 素 ， 所 以 下 面 内 容 代 码 示 意 部 分 全 部 使 用 单 冒号 。 

















1. content 辅助 元 素 生 成 
此 应 用 的 核心 点 不 在 于 content 生成 的 内 容 ， 而 是 伪 元 素 本 上身。 通常 ， 我 们 会 把 content 
的 属性 值 设 置 为 空 字符 串 ， 像 这 样 : 


.element :before { 











content.: 
} 
只 要 是 空 字符 串 就 可 以 ， 我 兽 多 次 见 到 有 人 设置 为 content : ' .'， 这 是 完全 没有 必要 的 。 








然后 ， 利 用 其 他 CSS 代码 来 生成 辅助 元 素 ， 或 实现 图 形 效 果 ， 或 实现 特定 布局 。 与 使 用 显 
式 的 HTML 标签 元 素 相 比 ， 这 样 做 的 好 处 是 HTML 代码 会 显得 更 加 干净 和 精简 。 

图 形 效 果实 现 跟着 设计 走 ， 不 具有 普 适 性 ， 这 里 不 介绍 。 重 点 说 说 辅助 元 素 在 布局 中 的 应 
用 。 其 中 ， 最 常见 的 应 用 之 一 就 是 清除 浮动 带 来 的 影响 : 


.Clear:after { 








content: 
display: table; /* 也 可 以 是 'block' */ 
clear: both; 

} 


另外 一 个 很 具有 代表 性 的 应 用 就 是 辅助 实现 “两 端 对 齐 ” 以 及 “入 直 
导 中 /上 边缘 /下 边缘 对 齐 ” 效 果 。 我 们 不 妨 来 看 一 个 二 合 一 的 实例 ， 手 动 输 
入 http://demo.cssworld.cn/4/1-7.php 或 者 扫 右 侧 的 二 维 码 。 此 实例 演示 是 
个 自动 等 宽 布局 且 底 部 对 齐 的 柱状 图 ， 默 认 展 示 了 4 项 ， 如 图 4-16 所 示 。 上 
当 我 们 动态 插入 更 多 桂子 元 素 ， 布 局 依然 智能 艾 分 镜 余 空间 ， 活 腊 脱 一 个 “国名 
弹性 盒子 布局 ， 效 果 如 图 4-17 所 示 ， 而 且 此 方法 所 有 浏览 器 全 兼容 。 


图 4-16 4 个 柱 形 图 效果 图 4-17 10 个 柱 形 图 效果 
核心 CSS 代码 如 下 : 


.box { 
width: 256px; height: 256px; 
/* 两 端 对齐 关 键 */ 
text-align: JjJustify; 

} 


.box:before { 
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GONCEnts. TY 
display: inline-block; 
height: 100%; 

} 

.box:after { 
content: ™"，; 
display: inline-block; 
widtnhn: 100%; 

} 

.bar { 
display: inline-block; 
width: 20px; 

} 


对 应 的 HTML 代码 如 下 : 


<div class="box"><i class="bar"></i> 
<i class="bar"></i> 
<i class="bar"></i> 
<i class="bar"></i> 

</div> 


至 于 实现 原理 ， :before 伪 元 系 用 于 辅助 实现 底 对 齐 ， 深 入 内 容 可 参见 5.3 六; :after 
伪 元 又 用 于 辅助 实现 两 端 对 齐 ， 深 入 内 容 可 参见 8.6 节 ， 这 里 不 展开 讲解 。 

这 一 方法 的 最 大 好 处 是 足够 兼容 ， 如 果 想 要 兼容 IE7 浏览 器 ， 直 接 使 用 标签 元 素 即 可 ， 但 
这 种 方法 也 有 不 足 之 处 ,就 是 HTML 代码 需要 注意 有 些 地 方 不 能 换行 或 者 空格 ， 有 些 地 方 则 必 
须要 换行 或 者 有 空格 , 这 在 多 人 协作 的 时 候 就 容易 出 问题 。 例 如 , 开 有 友人 员 喜 欢 编辑 器 的 HTML 
格式 化 功能 ， 然 后 标签 目 动 换行 ， 于 是 样式 就 会 出 现 侦 关 ， 所 以 ， 一 定 记得 在 HTML 代码 中 写 
上 明确 的 注释 一 一 “这 里 和 干 万 不 能 换行 ”或 者 类 似 这 种 。 

2. content 字符 内 容 生成 

content 字符 内 容 生 成 束 古 直接 写 入 字符 内 容 , 中 英文 都 可 以 , 比较 常见 的 应 用 就 是 配合 
Gfont-face 规则 实现 图 标 字 体 效 果 。 例 如 ， 下 面 这 个 例子 : 


Qfont—-face { 




















font-family: "myico"; 
src: url("/fonts/4/myico.eot"); 
src: url("/fonts/4/myico.eot#iefix") format ("embedded-opentype"), 
url("/fonts/4/myico.ttf") format ("truetype"), 
url("/fonts/4/myico.woff") format ("woff"),; 
} 
.licon-home:before { 
font-size: 64px; 
font-family: myico; 
content: "家 "; 
} 


<span class="icon-home"></span> 
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此 时 ， 页 面 显 示 的 可 能 就 不 是 一 个 “家 ” 字 ， 而 是 一 个 图 标 ， 如 图 4-18 所 示 。 上 面 的 例子 有 对 
应 的 实例 页 面 ， 手 动 输入 http://demo.cssworld.cn/4/1-8.php 或 者 扫 下 面 的 二 维 码 。 





图 4-18 “家 ” 字 显 示 成 了 一 个 房屋 图 标 


男 外 一 个 值得 介绍 的 点 束 是 ， 除 常规 字符 之 外 ， 我 们 还 可 以 插入 Unicode 字符 ， 比 较 经 典 
的 束 是 插入 换行 符 来 实现 某 些 布局 或 者 效果 。 核 心 CSS 代码 如 下 : 
:after { 
content: '\A'; 


white-space: pre; 


|; 

很 多 人 可 能 会 问 : 这 个 '\A' 是 什么 ?"'\A' 其 实 指 的 是 换行 符 中 的 LF 字符 ， 其 Unicode 
编码 是 000A, 在 CSS 的 content 属性 中 则 直接 写作 '\A' ;换行 从 除了 LF 字符 还 有 CR 字符 ， 
其 Unicode 编码 是 000D， 在 CSS 的 content 属性 中 则 直接 写作 '\D'。CR 字符 和 LF 字符 分 
别 指 回 车 (CCR) 和 换行 (LF), content 字符 生成 强大 之 处 束 在 于 不 仪 普通 字符 随便 插 , Unicode 
字符 也 不 在 话 下 。 

那 它 具体 有 什么 作用 呢 ? 很 显然 ,作用 就 是 换行 。 那 换行 勾 有 什么 用 呢 ? 确实 ,很 多 时 候 ， 
换行 效果 看 上 去 没什么 特别 之 处 ， 我 在 HTML 中 弄 个 <pr> 标 签 不 是 照样 有 一 样 的 效果 ? 但 是 
content 字符 生成 在 某 些 场景 下 真 的 可 以 大 放 异 彩 ， 我 们 不 妨 看 下 和 面 这 个 配合 CSS3 
animation 用 来 实现 字符 动画 效果 的 例子 。 

我 们 动态 加 载 页 面 内 容 的 时 候 ， 经 常会 使 用 “正在 加 载 中 ...” 这 几 个 字 ， 基 本 上 ， 后 面 的 
3 个 点 都 是 静态 的 。 静 态 的 问题 在 于 ， 如 果 网 络 不 流畅 ， 加 载 时 间 比 较 长 ， 就 会 给 人 有 假死 的 























流失 率 束 会 有 所 下 降 。 没 错 ， 我 们 可 以 利用 这 里 的 'RAI' 换 行 特性 计 “.…” 这 几 个 字符 动 起 来 ， 
HTML 和 CSS 代码 如 下 : 


正在 加 载 中 <dot>.. .</dot> 

dot { 
display: inline-block; 
height: lem; 
line-height: 1; 
text-align: left; 
vertical-align: .25em; 
overflow: hidden; 

} 

dot::before { 
display: block; 
CoNntent: To N\A VA TI 
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white—-space: pre-wrap; 

animation: dot 3s infinite step-start both,; 
} 
Qkeyframes dot ({ 

335 { transform: translateY (2em); } 

66% { transform: translateY (~lem); } 


} 








效果 , 可 以 手动 输入 http://demo.cssworld.cn/4/1-9.php 或 者 扫 右 侧 的 二 维 码 。 

动画 实现 的 原理 不 难 理解 ， 揪 入 3 行内 容 ， 分 别 是 3 个 点 、2 个 点 和 1 
个 点 ， 然 后 通过 transform 控制 垂直 位 置 ， 依 次 展示 每 一 行 的 内 容 。 

只 是 其 他 一 些 细节 怕 是 很 多 人 反而 有 疑问 。 

(1) 为 什么 使 用 <dot> 这 个 元 素 ? 

(2) 为 什么 使 用 : :before， 可 不 可 以 使 用 : :after? 

(3) 从 content 属性 值 来 看 ， 是 3 个 点 在 第 1 行 ， 而 1 个 点 反而 在 最 后 一 行为 什么 这 
么 处 理 ? 

(4) 这 里 white-space 值 为 何 使 用 的 是 pre-wrap 而 不 是 pre? 

这 4 个 问题 的 答案 分 别 如 下 。 

(1) <dqot> 是 自 定义 的 一 个 标签 元 素 ， 除 了 简约、 语义 化 明显 外 ， 更 重要 的 是 方便 癌 下 碌 
容 ，IE8 等 低 版 本 浏览 右 不 认识 自 定 义 的 HTML 标签 ， 因 此 ， 会 乖 秒 地 显示 里 面 默认 的 3 个 点 ， 
对 我 们 的 CSS 代码 完全 忽略 。 

(2) 伪 元 素 使 用 : :before 同时 display 设置 为 block， 是 为 了 在 高 版 本 浏览 器 下 原来 
的 3 个 点 推 到 最 下 面 ， 不 会 影响 content 的 3 行内 容 显示 ， 如 果 使 用 : :after 怕 是 效果 就 很 
难 实现 了 。 

(3) 3 个 点 在 第 一 行 的 目的 在 于 兼容 IE9 浏览 器 ， 因 为 IE9 浏览 器 认识 <dot> 以 
及 : :before， 但 是 不 文 持 CSS 新 世界 的 animation 属性 ， 所 以 ， 为 了 IE9 也 能 正和 显示 静 
态 的 3 个 点 ， 故 而 把 3 个 点 放 在 第 一 行 。 

(4) 这 里 的 white-space:pre-wrap 改 成 white-space:pre 效果 其 实 是 一 样 的 ， 之 所 
以 使 用 pre-wzap 作为 值 完 全 是 心情 使 然 。 关 于 两 者 的 差异 本 书后 面 会 介绍 ， 这 里 先 不 用 深 完 。 

还 有 最 后 儿 个 小 技巧 ， 首 先 ，' \A' 是 不 区 分 大 小 写 的 ， 其 次 ，' AD ' 也 能 实现 换行 效果 ， 
但 是 ， 要 想 上 下 行 对 齐 ， 需 要 用 在 : :before 伪 元 素 上 ， 因 为 CR 是 将 光标 移动 到 当前 行 的 开 
头 ， 而 LEF 是 将 光标 “垂直 ”移动 到 下 一 行 。 

3. content 图 片 生成 

content 图 片 生 成 指 的 是 直接 用 url 功能 从 显示 图 片 ， 例 如 : 


div:before { 





















































content: url(1.jpg); 
} 


url 功能 从 中 的 图 片 地 址 不 仪 可 以 是 常见 的 png、jpg 格式 ， 还 可 以 是 ico 图 片 、svg 
文件 以 及 base64URL 地 址 ， 但 不 支持 CSS3 渐变 背景 图 。 

虽然 文 持 的 图 片 格式 多 种 多 样 , 但 是 实际 项 目 中 ，content 图 片 生成 用 得 并 不 多 , 主要 原 
因 在 于 图 片 的 尺寸 不 好 控制 ， 我 们 设置 党 高 无 法 改变 图 片 的 固有 尺寸 。 所 以 ， 伪 元 素 中 的 图 片 
更 多 的 是 使 用 background-image 模拟 ， 类 似 这 样 : 


div:before { 





content: "''; 
background: url(l.J69); 
} 


在 我 看 来 content 图 片 生成 技术 的 实用 性 , 还 不 如 上 一 节 提 到 的 直接 使 用 content 属性 
蔡 换 文字 为 图 片 的 技术 , 除非 这 个 生成 的 图 片 是 base64URL 地 址 。 因 为 content 图 片 和 <img> 
图 片 的 加 载 表 现 是 一 样 的 ， 如 果 没 有 尺寸 限制 ,都 是 尺寸 为 0， 然后 忽然 图 片 尺寸 一 下 子 出 现 ， 
所 导致 的 问题 就 是 页 面 加 载 的 时 候 会 早 动 ， 影 啊 体 验 。 为 了 避免 这 个 问题 ， 我 们 只 能 限制 容 北 
尺寸 ， 那 么 ， 既 然 限 制 了 容 锅 尺寸 ， 为 何不 使 用 background-image 呢 ? 显 然 更 好 控制 啊 ? 
所 以 ， 只 有 不 需要 控制 尺寸 的 图 厂 才 有 使 用 优势 。 

base64 图 片 由 于 内 联 在 CSS 文件 中 ， 因 此 直接 出 现 , 没有 尺寸 为 0 的 状态 ， 同 时 无 须 额 外 
设置 display 属性 值 为 块 状 ，CSS 代码 更 省 。 如 果 还 没 理解 我 说 的 ， 可 以 看 一 个 对 比例 子 ， 
束 明 日 什么 意思 了 。 

下 面 两 段 CSS 代码 分 别 是 content 图 片 生成 和 content 辅助 元 素 背 景 图 : 

altarget=" plank™] :atter | 

content: url (data:image/gif;base64,R0Ol1GODIhBOAFAIABAMOAAAAAACH5BAEAAAEALAAAAAA 
FAAUAAAIHRIB2eKUOCgA7); 
} 


a [tardet="” blank"] :after { 
content: ''; 











display: inline-block; 

width: 6px; 

height: 6px; 

background: url('blank.gif"');} 
} 


可 以 看 到 明显 前 者 使 用 的 CSS 声明 数量 少 很 多 。 这 里 有 一 个 实例 , 演示 了 如 何 借助 base64 
地 址 和 content 图 片 生 成 技术 非常 简单 地 实现 新 标签 页 链接 标示 的 效果 ， 手 动 输入 
http://demo.cssworld.cn/4/1-10.php 或 者 扫 下 和 面 的 二 维 码 。 结 果 如 图 4-19 所 示 。 


点 击 这 个 链接 当前 页 刷新 ， 看 看 有 没有 标记 ; 点 


击 这 个 链接 wu， 新 标签 页 新 打开 一 次 本 页 面 ， 看 
看 有 没有 标 iC。 


图 4-19 ”新 标签 页 链接 标示 效果 
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4. 了 解 content 开启 闭合 符号 生成 

content 支持 的 属性 值 中 有 一 对 不 第 用 的 open—-quote 和 close-quote 天 键 字 ， 顾 名 
思 义 ,就 是 “开局 的 引号 ”和 “闭合 的 引 写 ” 使 用 纯正 的 中 文 解释 束 是 “上 引号 ”和 “下 引号 ”。 

如 果 单 看 表象 名 称 ， 貌 似 open-quote 和 close-quote 没什么 特别 ， 我 直接 使 用 : 








qd:before { 
content: '™'， 

} 

q:after { 
content: '”"'， 


地 不 更 好 ? 看 ,更易 懂 ,代码 的 字符 数 还 少 了 好 几 个 ,但 是 , 实际 上 , open-quote 和 close- 
quote 不 只 是 引号 这 么 简单。 

CSS 世界 中 有 一 个 名 为 quotes 的 属性 ， 可 以 指定 open—-quote 利 close-quote 字符 
具体 是 什么 。 例 如 ， 我 们 可 以 针对 不 同 语言 指定 不 同 的 前 后 符号 : 


<p lang="ch"><qgq> 这 本 书 很 赞 ! </gq></p> 

<p lang="en"><q>This book is very good!</q></p> 
<p lang="no"><q>denne bog er fantastisk!</qgq></p> 
/* 为 不 同 语言 指定 引号 的 表现 */ 

:lang(ch) > 9 { duotes: '' '”'; } 

:lang(en) > 9 { dquotes: '"' '"'; } 

:lang (no) > 9 { duotes: '«' '>»>'; |} 











/* 在 qq 标签 的 前 后 插入 引号 */ 
qd:before { content: open-quote; } 
qd:after { content: close-quote; } 


具体 表现 如 图 4-20 所 示 。 

你 以 为 open~-quote 和 close-quote Pe 
用 不 同 财 合 符号 吏 结 束 了 吗 ? 还 没有 结束 ， 虽 然 这 
quotes 顾名思义 是 “引号 ”但 是 其 实际 功能 是 : . 
们 可 以 指定 几乎 任意 的 字符 ， 而 且 是 任意 数量 的 字 


“这 本 书 很 赞 !" 











"This book is very good!" 











«denne bog er fantastiskl> 

















从。 因此 ， 我 们 可 以 玩 得 更 加 灵活 多 变 : 图 4-20 不 同 语言 指定 不 同 开局 闭合 从 号 
.ask { 
quotes:' 提 问 : WE Ev, 


} 
.answer { 

duotess "gg 人 管 : WY "wry 
} 
.ask:before, 
.answer:before { 


Content : open-quote; 


.ask:after, 
.answer:after { 
content: close-quote; 


| 
<p class="ask"> 为 什么 open-quote/close-quote 很 少 使 用 ? </p> 
<p class="answer"> 因 为 直接 使 用 字符 更 干脆 ! </p> 


we 4-21 所 示 类 似 。 

CSS 这 门 语言 很 有 意思 ， 我 们 常用 的 一 些 功能 往 [oper 
往 并 不 是 这 ss 就 好 比 这 里 的 SE 
open-quote 本 意 应 该 显示 引号 ， 这 里 却 主要 用 来 显 
示 标 题 。 大 多 数 服 务 型 网 站 都 是 有 帮助 页 面 的 ， 使 用 
这 种 技术 可 以 让 我 们 的 HTML 更 加 干净 简洁 。 

通过 上 面 一 番 简 单 介 绍 ,，open-quote 和 close-quote 给 人 感觉 挺 历 害 的 ,应 该 被 广泛 
使 用 才 对 ， 可 为 何 很 多 人 闻所未闻 、 见 所 未 见 呢 ? 

答案 束 在 于 此 技术 具有 完全 可 蔡 代 性 ， 且 蔡 换 实现 的 方法 还 更 容易 上 手 。 我 们 还 以 上 面 的 
“提问 /回答 ”应 用 为 例 ， 如 果 我 们 直接 使 用 字符 生成 会 这 样 : 


.aSk:before { 














4-21 普通 字符 鸠 后 般 昌 效 琳 

















content : ! 提 问 : 下 
.answer:before { 
content :5 回答 : "'， 
} 
.asSk:after, 
.answer:after { 
content: '”"'; 


} 
只 出 现 了 一 个 CSS 属性， 学 习 成 本 更 低 ; 直接 使 用 字符 ， 更 容易 理解 ， 代 码 量 似乎 也 少 了 那么 
一 氮 点 。 由 于 直接 “字符 生成 ”可 以 很 好 地 满足 我 们 的 开发 需求 ， 因 此 ， 还 需要 人 额外 学 习 的 
open-quote 和 close-quote 了 吏 鲜 有 人 问 律 了 。 

实际 上 ， 我 们 可 以 把 open-quote 和 close-quote 看 成 是 一 种 变量 ， 理 论 上 ， 这 种 设 
计 要 比 直接 字符 输出 更 好 维护 ， 其 原理 等 同 于 JavaScript 中 的 变量 ， 类 似 这 样 : 


Wl Se: 
r r 








Var quotes = [" 


Var openQuote = quotes[0]; 
Var closeQuote = quotes[1]; 


理论 上 应 该 更 好 维护 ,但 是 ，CSS 中 的 选择 器 本 里 束 有 变量 的 概念 ， 如 .ask 和 .answer， 
只 要 改 一 下 , 所 有 有 相关 类 名 的 元 素 都 会 肥 生 变化 ,于 是 , 使 用 open-quote 和 close-quote 
进行 内 容 生成 的 最 只 说 服 力 的 理由 也 被 扼杀 了 。 
综合 这 些 原因 ， 看 似 强 大 的 open-quote 和 close-quote 关键 字 最 后 变 得 很 鸡肋 。 
顺便 提 一 下 ，CSS 中 还 有 no-open-quote 和 no-close-quote 关键 字 ， 顾 名 思 义 ， 引 
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写 不 需要 了 了， 同样 是 看 上 去 很 酶 实际 却 很 鸡肋 的 CSS 关键 字 ， 这 里 我 承 不 展开 了 。 
5. content attr 属性 值 内 容 生 成 
此 功能 比较 常用 , 我 个 人 用 得 束 比 较 多 ， 比方 说 前 面 一 市 蕉 换 元 系 那 里 利用 alt 属性 显示 
图 卢 描 述 信息 的 例子 : 
img::after { 
/* 生成 alt 信息 */ 


content: attr(alt).; 


/* 其 他 css 上 略 */ 





} 
除了 原生 的 HTML 属性 ， 自 定义 的 HTML 属性 也 是 可 以 生产 的 ， 例 如 : 


.lcon:before { 
content: attr (data-title); 
} 


需要 注意 的 是 ，attr 功能 从 中 的 属性 值 名 称 干 万 不 要 
目 以 为 是 地 在 外 和 面 加 个 引号 。 不 能 有 引号 ， 奋 则 浏览 器 会 认 
为 是 无 效 的 声明 ， 如 图 4-22 所 示 。 

此 技术 虽 实 用 ， 但 并 无 多 少 可 以 展开 的 地 方 ， 因 此 就 说 

6. 深入 理解 content 计数 器 

计数 器 效果 可 以 说 是 content 部 分 的 重 中 之 重 ， 因 为 此 功能 非常 强大 、 实 用 ， 且 不 具有 
可 蔡 代 性 ， 甚 至 可 以 实现 连 JavaScript 都 不 好 实现 的 效果 。 但 同样 ，content 计数 器 具有 一 定 
的 深度 ， 大 家 可 以 适当 放 慢 节 秀 。 

所 谓 CSS 计数 句 效 果 ， 指 的 是 使 用 CSS 代码 实现 随 大 元 素数 目 增 多 ， 数 值 也 跟着 变 
大 的 效果 。 举 个 例子 ,我 曾经 在 业余 时 间 给 同事 做 过 一 个 点 果 汗 的 小 系统 ， 由 于 果汁 店 经 
常会 有 水 果 因 “果品 ”爆发 被 苋 相 购 买 而 缺 货 的 情况 ， 
因此 ， 每 人 可 以 选择 3 种 自由 搭配 的 饮品 ， 以 免 无 货 的 。 “于 :|W0+] | +] | 对 
尴 罚 。 于 是 ， 就 有 了 第 1 选择 、 第 2 选择 和 第 3 选择 ， 图 4-23 简单 的 计数 器 效果 实现 举例 
如 图 4-23 所 示 。 

图 中 的 灰色 小 字 中 的 1、2、3 就 是 使 用 CSS 计数 器 生成 的 , 这 个 可 以 说 是 最 最 基本 、 
最 最 简 蛙 的 计数 器 应 用 了 。 实 际 上 ， 计 数 器 能 够 实现 的 效果 非 第 强大。 但是， 万丈 高 楼 
平地 起 ， 在 介绍 高 级 应 用 之 前 ， 我 们 一 定 要 先 牢 牢 掌握 与 计数 器 相关 的 基础 知识 。 

CSS 计数 就 跟 我 们 军训 报 数 一 样 。 其 中 有 这 么 几 个 关键 反 。 

(1) 班级 命名 ; 有 个 称呼 ， 如 生 信 4 班 ， 就 知道 谁 是 谁 了 。 

(2) 报 数 规则 : 1、2、3、4 递增 报 数 ， 还 是 1、2、1、2 报 数 ， 让 班级 的 人 知道 。 

(3) 开始 报 数 : 不 上 用 口令 ， 大 有 眼 瞪 小 眼 ， 会 乱 了 秩序 。 

巧 的 是 , 以 上 3 个 关键 点 正好 对 应 CSS 计数 器 的 两 个 属性 (counter-reset 和 counter- 
increment ) 和 一 个 方法 (counter() /counters () )， 下 面 依次 讲解 。 











4-22 attr 里 面值 不 能 有 引号 









































(1) 属性 counter-reset。 顾 名 思 义 ， 就 是 “计数 器 - 重 置 ” 的 意思 。 其 实 就 是 “班级 命 
名 ”主要 作用 就是 给 计数 器 起 个 名 字 。 如 果 可 能 , 顺便 告诉 下 从 哪个 数字 开始 计数 。 上 默认 是 0， 
注意 ， 默 认 是 0 而 不 是 1。 可 能 有 人 会 疑惑 ， 网 上 的 各 种 例子 默认 显示 的 第 1 个 数字 不 都 是 1 
吗 ? 那 是 因为 受 了 counter-increment 普照 的 影响 ， 后 面 会 详细 讲解 。 

好 ， 这 里 我 们 先 看 两 个 简单 的 counter-reset 的 例子 : 

/* 计数 器 名 称 是 'wangxiaoer'， 并 旦 默认 起 始 值 是 2 */ 

.XXX { Counter-reset: wangxiaoer 2; |】 

眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-11.php 或 者 扫 下 面 的 二 维 码 。 结 果 如 图 4-24 
所 示 。 








我 叫 王 小 二 ， 字 如 甚 名， 下面 要 出 现 的 数字 是 : 





2 





图 4-24 counter-reset 为 起 始 值 为 2 


counter-reset 的 计数 重 置 可 以 是 负数 ， 如 -2， 也 可 以 写成 小 数 ， 如 2.99， 不 过 ,IE 
和 Firefox 对 此 都 不 识别 ， 认 为 是 不 合法 数值 ， 直 接 无 视 ， 当 作 默 认 值 0 来 处 理 ，Chrome 不 嫌 
贫 嫉 宣 ， 任 何 小 数 都 是 同 下 取 整 ， 如 2 .99 当成 2 处 理 ， 于 是 王 小 二 还 是 那个 王 小 二 。 

到 此 为 止 ? 当然 不 是 ! counter-reset 还 有 一 手 ， 就 是 多 个 计数 占 同 时 命名 。 例 如 ， 王 
小 二 和 王 小 三 同时 登台 : 








.XXX { Counter-reset: wangxiaoer 2 wangxiaosan 3; |】 
直接 空格 分 隅 ， 而 不 是 使 用 逗 与 分 隅 。 

眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-12.php 或 者 扫 下 面 的 二 维 码 。 结 果 如 图 4-25 
所 示 。 








我 叫 王 小 一 ， 万 万 没 想到 ， 会 出 现 另外 一 个 数字 : 
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4-25 counter-reset 多 值 并 存 


男 外 ，counter-reset 还 可 以 设置 为 none 和 inherit。 取 消 重 置 以 及 继承 重 置 。 这 里 








束 不 展开 了 。 

(2) 属性 counter-increment 。 顾 名 思 义 ， 束 是 “计数 器 递增 ”的 意思 。 信 为 counter- 
reset 的 1 个 或 多 个 关键 字 ， 后 面 可 以 跟随 数字 ， 表 示 每 次 计数 的 变化 值 。 如 采 省 略 ， 则 使 用 
默认 变化 值 1《〈 方 便 起 见 ， 下 面 都 使 用 默认 值 做 说 明 )。 

CSS 的 计数 器 的 计数 是 有 一 套 规则 的 ， 我 将 之 形象 地 称 为 “普照 规则 ”。 具 体 来 讲 就 是 ， 首 照 
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源 (counter-reset) 唯一 ， 每 普照 (counter-increment) 一 次 ， 善 上 照 源 增 加 一 次 计数 值 。 

于 是 ,我 们 就 可 以 解释 上 和 面 提 到 的 “默认 值 是 0” 的 问题 了 。 通 常 CSS 计数 融 应 用 的 时 候 ， 
我 们 都 会 使 用 counter-increment， 肯 定 要 用 这 个 ， 人 否则 怎么 递增 呢 ! 而 且 一 般 都 是 一 次 普 
照 ， 正 好 加 1， 于 是 ， 第 一 个 计数 的 值 就 是 1 (0+1=1)! 

下 面 通 过 几 个 例子 给 大 家 形象 地 展示 一 下 “普照 规则 ” 

手动 输入 http://demo.cssworld.cn/4/1-13.php 或 者 扫 下 面 的 二 维 码 。 本 示例 中 ， 王 小 二 的 
GOUnEeF=TegseE 证 wangdxidoer2; 但 是 ; 是 下 的 计数 不 是 小 全 而 是 小 3 二 小 二 要 成 
王 小 三 ! 如 图 4-26 所 示 。 














我 叫 王 小 一 ， 万 万 没 想 到 ， 会 出 现 另 外 一 个 数 
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图 4-26 counter-increment 递增 与 counter-reset 值 





示例 效果 的 核心 代码 如 下 : 


.Counter { 
Counter-reset: wangxiaoer 2; 


Counter-increment: wangxiaoer; 


} 
.Counter:before { 


content: counter (wangxiaoer);} 


} 


<p class="counter"></p> 

这 里 counter-increment 普照 了 <p> 标签 ， counter-reset 值 增加 ， 默认 递增 1， 于 
是 计数 从 设置 的 初始 值 2 变 成 了 3，wangxiaoer 了 加 是 这 里 的 计数 器 ， 上 自然 伪 元 素 content 
值 counter (wangxiaoer) 驱 是 3。 


当然 ， 它 也 可 以 普照 自 司 ， 也 束 是 counter-increment 直接 设置 在 伪 元 素 上 : 








.Counter { 
counter-reset: wangxiaoer 2; 


} 
.Counter:before { 
content: counter (wangxiaoer);} 


counter-increment: wangxiaoer; 


} 

依然 是 1 次 普照 ， 依 旧 全 局 的 计数 右 加 1， 所 以 显示 的 数值 还 是 3， 和 上 面 的 例子 一 样 。 

趁 热 打铁 ， 如 果 父 元 素 和 子 元 系 剖 外 counter-increment 普照 1 次 ， 结 果 会 如 何 呢 ? 

很 简单 ， 父 元 素 1 次 普照 ， 子 元 系 1 次 普照 ， 共 2 次 普照 ，counter-reset 设置 的 计数 
器 值 增 加 2 次 ， 计 数 起 始 值 是 2， 于 是 现实 的 数字 就 是 4 啦 ! 

眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-14.php 或 者 扫 下 面 的 二 维 码 。 结 果 4 如 








我 叫 圭 小 二 ， 万 万 没 想 到 ， 我 现在 居然 成 了 圭 小 .. 





图 4-27 counter-increment 父子 连续 普照 递增 








.Counter { 


Counter-reset: wangxiaoer 2; 
counter-increment: wangxiaoer; 
} 
.Counter:before { 
content: counter (wangxiaoer); 
counter-increment: wangxiaoer; 


} 

总 而 言 之 , 无 论 位 置 在 何 处 , 只 要 有 counter-increment, 对 应 的 计数 器 的 值 就 会 变化 ， 
counter () 只 是 输出 而 已 ! 

理解 了 “普照 规则 ”， 通 第 的 计数 喜 递 增 效 末 也 残 可 以 理解 了 。 

考虑 下 面 这 两 个 问题 : 

(1 ) 爸爸 受到 普照 ， 且 重 置 默认 值 0， 和 爸 和 爸 有 两 个 孩子 。 孩 子 目 里 都 没有 普照 。 两 个 孩子 
的 计数 值 是 多 少 ? 

(2) 爸爸 没有 普照 ， 重 置 默 认 值 0， 和 多 和 爸 有 两 个 孩子 。 孩 子 自 壬 都 接受 普照 。 两 个 孩子 的 
计数 值 是 多 少 ? 

答案 是 : 1,1 和 1,21! 

答案 大 然 不 一 梓 ， 有 什么 差别 呢 ? 

很 简 捍 。 什 么 和 爸爸、 孩子 ， 你 都 不 要 关心 ， 只 需要 看 被 普照 了 几 次 。 情 况 1 只 有 爸爸 被 普 
照 ， 因此， 计数 器 增加 1 次 ， 此 时 两 个 孩子 的 counter 自然 都 是 1。 情况 2， 两 个 孩子 被 普照 ， 
普照 2 次 ， 第 一 个 孩子 普照 之 时 ， 计 数 器 加 1， 也 就 是 1; 第 二 个 孩子 普照 之 时 再 加 1， 于 是 就 
是 25 于 是 ， 两 个 公子 的 Countee 生出 砚 是 1,2。 

眼见 为 实 , 手动 输入 http://demo.cssworld.cn/4/1-15.php 或 者 扫 下 面 的 二 维 码 。 结 果 如 图 4-28 
所 示 。 














我 叫 土 小 二 ， 万 万 没 想 到 ， 兄弟 情 深 ， 计 数 递增 ! 
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图 4-28 兄弟 情 深 ,计数 递增 
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核心 CSS 代码 如 下 : 

.Counter { 
Counter-reset: wangxiaoer 2; 

l 

.Counter:before, 

.Counter:after { 
content: counter (wangxiaoer); 
Counter-increment: wangxiaoer; 


} 
计数 器 的 数值 变化 遵循 HTML 演 染 顺序 ， 遇 到 一 个 increment 计数 器 就 变化 ， 什 么 时 候 
counter 输出 就 输出 此 时 的 计数 值 。 
除了 以 上 基本 特性 外 ，counter-increment 还 有 其 他 一 些 设 定 。 
。 counter-reset 可 以 一 次 命名 两 个 计数 器 名 称 , counter-increment 自然 有 与 之 
呼应 的 设 是 ， 在 写法 上 也 是 空格 区 分 束 可 以 了 。 例 如 : 


.Counter { 
Counter-reset: wangxiaoer 2 wangxiaosan 3; 
counter-increment: wangxiaoer wangxiaosan; 
} 
.Counter:before { 
content: counter (wangxiaoer);} 
} 
.Counter:after { 
content: counter (wangxiaosan); 


} 


结果 如 图 4-29 所 示 。 
e 正如 本 节 开 始 时 提 到 的 ， 这 变化 的 值 不 一 定 是 1， 可 以 灵活 设置 。 例 如 : 











counter-increment: counter 2 


那 就 是 两 个 两 个 地 增加 ， 对 比 看 更 棒 ! 图 4-30 左 半 是 默认 的 加 1， 右 半 是 加 2。 
1，increment + 显示 2?，increment + 显示 


2?， increment + 显示 4，increment + 显示 


3.，increment + 显示 6，increment + 显示 


4，increment + 显示 8，increment + 显示 


我 叫 王 小 二 ,万 万 没 想 到 ,兄弟 情 深 ， 计数 递增 ! 
4， 显示 3 


34 4， 显 示 3， 显示 
图 4-29 ”多 个 计数 右 同 时 递增 图 4-30 不 同 递增 信 的 计数 对 比 
变化 的 值 还 可 以 是 负数 ， 例 如 : 
counter-increment: counter -1 
这 样 殊 有 了 递减 排序 效 末 啦 ! 
。 值 还 可 以 是 none 或 者 inherit。 





(3) 方法 counter () /counters ()。 这 是 方法 ， 不 是 属性 。 类 似 CSS3 中 的 calc () 计 
算 。 这 里 的 作用 很 单纯 ， 即 显示 计数 ， 不 过 名 称 、 用 法 有 多 个 ， 如 图 4-31 所 示 。 
到 目前 为 止 的 所 有 示例 使 用 的 都 古 最 简单 的 用 法 : 
/* name 就 是 counter-reset 的 名 称 */ Sener :cor EE 
@ counter [name, style) 
counter (name ) 


念 counters [name, strine) 
@ counters (name, stringe, style) 


那 下 面 这 个 语法 是 什么 意思 呢 ? 人 URL.. 


冬 | 4- 和 -一目 名 称 、 
counter (name, stvyle) 图 4-31 counter/counters 的 一 些 名 称 和 用 法 





这 里 的 style 参数 还 是 有 些 名 堂 的 。 它 支持 的 关键 字 值 束 是 list-style-type 支持 的 
那些 值 。 它 的 作用 是 : 我 们 递增 递减 可 以 不 一 定 是 数字 ， 还 可 以 是 英文 字母 或 者 多 轧 文 等 。 








list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | 
lower-alpha | upper-alpha | none | armenian | jk-ideographie | georgian | lower-greek 


| hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-16.php 或 者 扫 下 面 的 二 维 码 。 结 果 如 图 4-32 所 示 。 


我 叫 圭 小 二 ， 万 万 没 想 到 ， 我 变 成 了 宏 扎 人 ! 











图 4-32 ”小 写 罗 马 数字 格式 表示 当前 计数 器 的 值 
核心 CSS 代码 如 下 : 
content: counter (wangxiaoer, lower-roman);} 


counter 还 支持 级 联 。 也 就 是 说 ， 一 个 content 属性 值 可 以 有 多 个 counter () 方法 。 


眼见 为 实 ， 手 动 输 入 http://demo.cssworld.cn/4/1-17.php 或 者 扫 下 面 的 二 维 码 。 结 果 如 图 4-33 
所 示 。 


我 叫 王 小 二 ， 万 万 没 想到 ， 我 还 有 一 个 兄 第 ! 


2 


3 


4-33 ”多 个 counter 并 存 





核心 CSS 代码 如 下 : 


.Counter { counter-reset: 
.Counter:before { 


wangxiaoer 2 wangxiaosan 3; |】 


content: counter (wangxiaoer) '\A' counter (wangxiaosan);} 


white-space: pre; 


4.1 深入 理解 content 71 














下 面 介绍 一 下 counters () 方 法 。 看 似 只 比 counter 多 了 个 字母 s， 但 却 有 着 人 至 尊 宝 变 
成 孙悟空 的 意味 在 里 面 。counters 几乎 可 以 说 是 诅 套 计数 的 代名词 。 

我 们 平时 的 序号 不 可 能 就 只 是 1、2、3、4…… 还 会 有 诸如 1.1、1.2、1.3 等 的 子 序号 。 前 
者 就 是 counter () 干 的 事情 ， 后 者 束 是 counters () 干 的 事情 。 

counters () 的 基本 用 法 为 ”: 


counters (name, string);} 


其 中 ，string 参数 为 字符 串 (需要 引号 包围 的 ， 是 必需 参数 )， 表 示 子 序号 的 连接 字符 串 。 例 
如 ;11H 鸭 String 头 是 7 1=1 硕 是 "一 

看 上 去 很 镜 蛙 。 但是， 如 果 理 解 不 是 很 深刻 ,日 后 再 使 用 肯定 会 过 到 麻烦 一 一 “ 呈 ? 怎 
么 没有 子 序列 ， 明 明 语 法 正确 啊 ? ”首先 ， 记 住 这 一 句 话 :“ 普 照 源 是 唯一 的 ”所 以 ， 如 果 
只 在 <body> 标 签 上 设置 counter-reset， 了 束 算 子 元 素 般 僚 了 里 外 十 八 层 ， 还 是 不 会 有 任 
何 藤 套 序号 出 现 ! 所 以 ， 要 想 实 现 肉 套 ， 必 须 让 每 一 个 列表 容器 拥有 一 个 “普照 源 ” 通过 
子 碍 对 父 奉 的 counter-reset 重 置 、 配 合 counters () 方 法 才能 实现 计数 欣 套 效果 。 

眼见 为 实 ， 手 动 输 入 http://demo.cssworld.cn/4/1-18.php 或 者 扫 下 面 的 二 维 码 。 结 果 如 图 4-34 
所 示 。 






































我 叫 王 小 二 ， 万 万 没 想到 ， 一 着 不 惰 ， 娃 娃 连 营 满 地 滚 : 


1. 我 是 十 小 一 
1-1. 我 是 于 小 二 的 大 儿子 
1-2. 我 是 王 小 二 的 二 儿子 
1-2-1. 我 是 王 小 二 的 二 儿子 的 大 孙子 
1-2-2. 我 是 王 小 二 的 二 儿子 的 二 孙子 
1-2-3. 我 是 王 小 二 的 二 儿子 的 小 孙子 
1-3. 我 是 于 小 二 的 二 儿子 
2. 我 是 十 小 二 
3. 我 是 于 小 四 
3-1. 我 是 十 小 四 的 大 儿子 





图 4-34 counters 的 string 参数 与 舱 套 


使 用 counters () 实现 计数 藤 套 效果 的 时 候 很 容易 过 到 类 似 这 样 的 研 烦 一 一 “ 喇 ， 怎 么 子 
序列 不 按 层 级 顺序 来 呀 ?命名 语法 明明 完全 正确 啊 !” 还 是 要 记 住 这 一 句 话 :“ 一 个 容器 里 的 普 
照 源 (counter-reset) 是 唯一 的 。” 所 以 ， 如 果 你 不 小 心 把 计数 显示 和 计数 重 置 元 系 以 兄 第 
元 球形 式 放 在 一 起 (虽然 HTML 内 容 布局 呈现 是 没有 异常 的 )， 束 很 可 能 会 出 现 计 数 序 与 乱入 
的 情况 。 

还 是 举 个 例子 说 明 一 下 吧 ， 手 动 输入 http://demo.cssworld.cn/4/1-19.php 或 者 扫 下 面 的 二 维 码 。 
结果 如 图 4-35 所 示 。 这 时 惑 会 看 到 标 红 部 分 的 序号 显示 异 音 了 ! 

为 何 会 出 现 这 个 问题 ? 我 们 看 一 下 HTML (主要 是 注释 ): 




















GD MDN 上 说 ， 要 想 IE8 兼容 ， 这 里 扣 号 后 面 的 空格 要 去 掉 ， 但 是 本 人 通过 IE11 浏览 器 的 正 8 模式 看 ， 无 此 问题 。 本 
着 求知 的 精神 ， 我 又 打开 自己 已 经 落 灰 的 10 年 前 的 笔记 本 ， 使 用 原生 IE8 浏览 器 测试 了 一 下 ， 结 果 也 是 没有 问题 ， 
因此 ，MDN 上 的 说 法 可 以 忽略 。 





<div class="reset"> 
<div class="counter"> 我 是 干 小 二 </div> 
<div class="reset"><—— 先 下 面 文字 说 明 二 二 全 


</div> 
<div class="counter"> 我 是 王 小 三 </div> 
<div class="counter"> 我 是 王 小 四 </div> 
<div class="reset"> 
<div class="counter"> 我 是 王 小 四 的 大 儿子 </div> 
</div> 
</div> 


这 里 的 .reset 与 上 耐 的 .counter 是 见 轨 关 系 , 而 不 是 父子 关系。 虽然 布局 泻 染 上 没有 差 寞 ， 
但 是 一 个 容器 的 counter-reset 是 唯一 的 , 一 旦 子 元 素 出 现 counter-reset， 束 会 改变 整 
个 容 右 的 艇 套 关 系 ， 于 是 ， 后 面 的 “ 王 小 三 ”“ 王 小 四 ”其 实 已 经 进入 了 二 级 航 套 ， 因 此 显示 的 
是 1-3 和 1-4， 相 信 读 者 稍稍 体会 一 下 就 能 明白 了 。 








我 叫 于 小 二 ， 万 万 没 想 到 ， 一 着 不 愤 ， 子 秒 成 群 ( 反例 ) : 


1. 我 是 王 小 一 
1-1. 我 是 王 小 二 的 大 儿子 
1-2. 我 是 王 小 二 的 二 儿子 
1-2-1. 我 是 王 小 二 的 二 儿子 的 大 孙子 
1-2-2. 我 是 王 小 二 的 二 儿子 的 二 和 孙子 
1-2-3. 我 是 王 小 二 的 二 儿子 的 小 孙子 





1-1. 我 是 王 小 四 的 大 儿子 





4-35 ”counters 列表 被 重 置 乱 入 

这 种 计数 效果 在 模拟 书籍 的 目录 效果 时 非常 实用 ， 大 家 可 以 参照 上 面 正确 的 租 套 例子 修 修 
改 改 殴 可 以 了 。 

counters () 也 是 文 持 style 目 定 义 递 增 形式 的 : 

counters (name, string, style) 
它 与 counter () 的 style 参数 使 用 一 致 ， 这 里 不 性 述 。 

最 后 ， 还 有 一 个 比较 重要 的 点 需要 说 明 一 下 ， 束 是 显示 content 计数 值 的 那个 DOM 元素 在 
文档 流 中 的 位 置 一 定 要 在 counter-increment 











元 素 的 后 面 ， 人 否则 是 没有 计数 效果 的 。 En 
举 个 例子 ， 我 们 可 以 使 用 纯 CSS 实现 自动 统 ws 网 





计 选 中 元 系 个 数 的 效果 , 但 是 很 可 能 显示 数值 的 视 
觉 位 置 是 在 操作 区 域 的 于 侧 或 者 上 方 , 类似 图 436 sm3 
所 示 。 

如 打 我 们 是 传统 的 布局 ， 左 侧 的 圆圈 中 的 数值 。 于 m4 
必然 是 无 法 显现 的 ， 我 们 需要 把 左 侧 的 列表 选项 元 
系 放 在 操作 元 系 的 后 面 才 可 以 ， 关 似 下 面 这 样 : 4-36 counters 数值 显示 在 操作 区 域 左 侧 








256X192 
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<main></main> 


<nav></nav> 


7. content 内 容 生 成 的 混合 特性 
所 谓 “content 内 容 生 成 的 混合 特性 ” 指 的 是 各 种 content 内 容 生 成 语法 是 可 以 混合 在 
一 起 使 用 的 ， 举 下 面 几 个 简单 的 例子 : 
a:after { 
content: "(" attr(href) ")"; 
RE { 








content: open-quote url(1.-jJpg); 
} 
.Counter:before { 
content: counters (wangxiaoer, '—') '. 


} 

于 是 , 我 们 如 果 和 希望 在 伪 元 素 中 同时 显示 图 片 和 文字 排列 效果 ， 只 需要 一 个 :before 或 者 
= 隋 可 以 ， 完全 不 需要 两 个 同时 上 阵 、 分 别 负责 一 个 类 型 。 

总 而 言 之 ，content 内 容 生 成 搁 术 是 非常 强大 的 ， 关 键 要 看 大 家 的 积 索 、 灵 感 和 创意 。 


42 温和 的 padding 属性 


傅 尺 寸 四 大 家 族 元 素 中 , padding 的 性 格 是 最 温和 的 。 所 请 “温和 ” 指 的 是 我 们 在 使 用 padding 
进行 页 面 开发 的 时 候 很 少 会 出 现 意 想 不 到 的 情况 ， 这 种 感觉 就 好 比 和 一 个 几乎 不 会 发 脾气 的 人 相处 。 

padding 指 盒子 的 内 补 间 。”“ 补 间 ” 这 个 词 比 较 术 语 化 ， 我 们 不 妨 将 其 理解 为 快递 盒子 内 
快递 商品 外 包 里 的 那 层 起 保护 作用 的 海 强 。 只 是 在 CSS 中 ， 这 个 “ 海 细 ” 默 认 是 透明 的 。 在 现 
实 世 界 中 ， 海 绢 不 会 影响 盒子 的 太 寸 ， 但 在 CSS 世界 中 ， 扩 二 规则 就 有 所 不 同 了 。 


4.2.1 padding 与 元 素 的 尺寸 


因为 CSS 中 默认 的 box-sizing 是 content-box, 所 以 使 用 padding 会 增加 元 素 的 尺 
乔 : 5 例如 : 
.box { 
width: 80px; 


padding: 20px; 
} 


如 果 不 考 卡其 他 CSS 干扰 ,此 时 .box 元 素 所 占据 的 宽度 融 应 该 是 120 像 系 (80px +20pxx2)， 
这 其 实 是 不 符合 现实 世界 的 认 知 的 ， 人 们 总 是 习惯 把 代码 世界 和 现实 世界 做 映射 ， 因 此 ， 新 人 
难免 会 在 padding 的 尺寸 问题 上 躁 到 点 坑 。 这 也 导致 很 多 人 乐此不疲 地 设置 pox-sizing 为 
bordqer-box， 其 至 直接 全 局 重 置 : 



































x { box-sizing: border-box; } 











我 个 人 是 不 推荐 这 种 做 法 的 ， 原 因 见 3.2.4 节 。 局 部 使 用 ， 尽 量 采用 无 宽度 以 及 宽度 分 离 
准则 实现 才 是 好 的 解决 之 道 。 

很 多 人 可 能 有 这 样 的 误区 , 认为 设置 了 box-silzing:bBorder=—box, 元 素 尺 寸 就 不 会 变化 。 
大 多 数 情况 下 是 这 样 的 ， 但 是 ， 如 果 padding 值 足够 大 ， 那 么 widtnh 也 无 能 为 力 了 。 例 如 : 


.box { 
width: 80px; 
padding: 20px 60px; 
box-sizing: border-box; 


} 
则 此 时 的 wigth 会 无 效 ， 最 终 宽度 为 120 像素 (60pxX2)， 而 里 面 的 内 容 则 表现 为 “首选 最 


小 宽度 ”。 

上 述 尺 寸 表现 是 对 具有 块 状 特性 的 元 取 而 言 的 ， 对 于 内 联 元 素 〈 不 包括 图 片 等 瞧 换 元 素 ) 
表现 则 有 些许 不 同 。 这 种 不 同 的 表现 让 很 多 很 多 的 前 端 同 事 有 这 么 一 个 错误 的 认识 : 内 联 元 素 
的 padding 只 会 影 啊 水 平方 辐 ， 不 会 影 啊 王 直方 问 。 

这 种 认 知 是 不 准确 的 ， 内 联 元 素 的 padding 在 垂直 方向 同样 会 影响 布局 ， 影 响 视 觉 表现 。 
只 是 因为 内 联 元 素 没 有 可 视 宽度 和 可 视 高 上 度 的 说 法 (clientHeight 和 clientWigdth 永远 是 
0)， 王 直方 癌 的 行为 表现 完全 受 line-height 和 vertical-align 的 影响 ， 视 觉 上 并 没有 
改变 和 上 一 行 下 一 行内 容 的 间距 ， 因 此 ， 给 我 们 的 感觉 就 会 是 垂直 Padqing 没有 起 作用 。 

如 采 我 们 给 内 联 元 又 加 个 背景 色 或 者 边框 ， 目 然 残 可 以 看 到 其 尺寸 空间 确实 受 padding 
影响 了 。 例 如 : 


a { 





























padding: 5Opx; 
background-color: #cd0000; 
} 


然后 表现 就 会 如 图 4-37 所 示 这 般 。 眼见 为 实 , 手动 输入 http://demo.cssworld.cn/4/2-1.php 或 者 扫 
下 面 的 三 维 码 。 











图 4-37 内 联 元 素 padding 垂直 方向 也 是 有 效 的 


可 以 明显 看 到 ， 尺 寸 时 有效， 但 是 对 上 下 元 系 的 原本 布局 却 没 有 任何 影响 ， 仅 仅 是 垂直 方 
问 发 生 了 层 症 ， 如 图 4-38 所 示 。 

CSS 中 还 有 很 多 其 他 场景 或 属性 会 出 现 这 种 不 影响 其 他 元 系 布 局 而 是 出 现 层 车 效果 的 现 
象 。 比 如 ，relative 元 素 的 定位 、 盒 阴影 box-shadow 以 及 outline 等 。 这 些 层 登 现 象 虽 
然 看 似 类 似 ， 但 实际 上 是 有 区 别 的 。 其 分 为 两 类 : 一 类 是 纯 视觉 层 登 ， 不 影 啊 外 部 尺寸 ， 另 一 
类 则 会 影响 外 部 尺寸 。box-shadow 以 及 outline 属于 前 者 ， 而 这 里 的 inline 元 系 有 的 
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padding 层 登 属于 后 者 。 区 分 的 方式 很 简单 ， 如 和 果 父 容器 overflow:auto， 层 登 区 域 超出 父 
容 髓 的 时 候 ， 没 有 滚动 条 出 现 ， 则 是 纯 视 觉 的 ， 如 果 出 现 滚动 条 ， 则 会 影响 尺寸 、 影 啊 布局 。 
如 果 上 面 的 示例 父 元 素 设 置 overflow:auto， 则 会 有 类 似 图 4-39 所 示 的 表现 。 


内 联 元 素 垂 直 padding 也 有 作用 实例 页 面 内 联 元 素 牌 直 padding 也 有 作用 实例 页 面 


TT" , 





代码 











4-38 ”内 联 元 系 padding 垂直 方向 层 登 表现 ”图 4-39 内 联 元 素 垂直 padqing 影响 父 级 出 现 滚动 条 


由 此 可 见 ， 内 联 元 素 padding 对 视觉 层 和 布局 层 具有 双重 影响 ， 所 有 类 似 “垂直 方向 
padding 对 内 联 元 素 没有 作用 ”的 说 法 显然 是 不 正确 的 。 

好 了 ， 现 在 知道 了 内 联 元 素 padding 有 用 ， 这 对 我 们 做 实际 CSS 开发 有 什么 帮助 呢 ? 

首先 , 我 们 可 以 在 不 影响 当前 布局 的 情况 下 , 优雅 地 增加 链接 或 按钮 的 点 击 区 域 大 小 。 比 方 说 ， 
文章 中 会 有 一 些 文字 链接 ， 默 认 情 况 下 ， 这 些 链接 的 点 击 区 域 的 高 度 是 受 font-size 字体 大 小 控 
制 的 ， 和 行 高 没有 关系 。 尤 其 在 Chrome 等 浏览 器 下 ， 高 度 仅 lem， 这 么 小 的 高 度 ， 要 是 在 移动 端 ， 
我 们 的 手指 不 一 定 能 够 一 次 点 中 ， 可 能 要 戳 好 多 下 ， 此 时 就 有 必要 增加 链接 的 点 击 区 域 大 小 ， 但 是 
前 提 是 不 影响 当前 的 内 容 布局 。 此 时 ， 我 们 就 可 以 使 用 padaing 天 然 实现 我 们 想 要 的 效果 ， 例 如 ， 


article a { 









































padding: .25em 0;} 
} 


前 文 多 次 提 到 ，CSS2.1 的 属性 就 是 为 了 图 文 显示 而 设计 的 ， 从 这 一 点 出 发 ， 我 们 就 不 难 理解 为 
何 内 联 元 系 的 牌 直 Padqqing 会 是 这 样 的 样式 表现 了 ， 目 的 焉 是 如 上 面 说 的 例子 这 样 ， 增 加 点 击 区 域 
同时 对 现 有 布局 无 任何 影响 ， 如 果 我 们 设置 成 inline-block， 则 行 间 距 等 很 多 抹 烦 事 束 会 出 来 。 

当然 ，CSS 的 有 趣 之 处 在 于 我 们 可 以 利用 其 特性 表现 实现 其 设计 初衷 以 外 的 一 些 效果 。 例 
如 ， 这 里 有 个 简单 的 例子 ， 利 用 内 联 元 素 的 padding 实现 高 度 可 控 的 分 隔 线 。 传 统 偷懒 的 实 
现 方式 可 能 是 直接 使 用 “管道 符 ”， 如 : 

登录 | 注册 
但 是 使 用 “管道 待 ” 的 话 ， 因 为 是 字符 ， 所 以 高 度 不 可 控 。 如 果 对 视觉 呈现 要 求 比 较 局 ， 束 需 
要 进行 CSS 图 形 模拟 ， 其 中 方法 之 一 束 是 可 以 借助 内 联 元 素 和 padding 属性 来 实现 ，CSS 和 
HTML 代码 如 下 : 






































a+ a:before { 
content: ™"，; 
font-size: 0; 
padding: 1l10px 3px lpx; 
margin-left: 6px; 


border-left: lpx solid gray; 
} 


<a href=""> 登 录 </a><a href=""> 注 册 </a> 


一 个 高 度 不 那么 高 的 牌 直 分 隔 符 束 出 来 了 了， 如 图 4-40 所 示 。 有 兴趣 可 以 自己 感受 一 下 ， 手 
动 输入 http://demo.cssworld.cn/4/2-2.php 或 者 扫 下 面 的 二 维 码 。 








图 4-40 ”内 联 元 素 padding 实现 的 垂直 分 隅 符 





最 后 ， 再 简单 说 一 个 内 联 元 素 垂 直 padding 的 妙用 吧 ! 大 家 应 该 都 知道 网 页 可 以 通过 地 址 
栏 的 hash 值 和 页 面 HIML 中 id 值 一 样 的 元 系 发 生 销 点 定位 吧 ? 有 时 候 , 我 们 希望 定位 的 元 系 ， 
如 标题 距离 页 面 的 顶部 有 一 段 距离 , 比方 说 页 面 正好 有 一 个 50 像 取 高 的 position:fixed 的 导 
航 栏 。 如 有 果 按 照 浏览 颖 上 自己 的 特性 ， 标 题 束 会 定位 在 这 个 固定 导航 的 下 面 ， 这 显然 不 是 我 们 想 看 
到 的 ， 那 怎么 办 呢 ? 

很 多 人 会 想到 让 标题 栏 设 置 一 个 padding-top:50px， 但 是 ， 这 种 影响 布局 的 事情 大 多 
数 时 候 只 是 理论 上 可 行 ， 难 道 没有 什么 简单 实用 的 办 法 吗 ? 这 时 候 ， 我 们 不 妨 试 试 使 用 内 联 元 
素 ， 块 级 元 系 设 置 padding-top:50px 会 影响 布局 ， 但 是 内 联 元 素 不 会 ， 于 是 ， 事 情 就 简单 
了 。 假 设 下 面 是 原来 的 实现 : 

<h3 id="hash"> 标 题 </h3> 


h3 { 
line-height: 30px; 











font-size: 14px; 


} 
则 我 们 可 以 将 其 改 成 : 


<h3><span id="hash"> 标 题 </span></h3> 
h3 { 
line-height: 30px; 
font-size: 14px; 
} 
h3 > span { 
padding-top: 58px; 
} 


这 样 既 不 影 啊 原来 的 布局 和 定位 ， 同 时 义 把 http://www.cssword.cn/xxxx/#hash 
定位 位 置 往 下 移动 了 50 像 系 ， 旦 不 美 吉 ! 

虽然 这 不 是 十 全 十 美的 方法 , 但 是 总 体 性 价 比 还 是 很 不 错 的 。 然后， 如 果 我 们 的 <h3> 标 签 
设置 overflow:hidden， 则 Chrome 和 Firefox 浏览 器 定位 不 受 影 啊 ， 但 是 下 浏览 器 会 定位 
在 <h3> 标 签 位 置 ， 这 个 需要 注意 。 
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实际 上 ， 对 于 非 蔡 换 元 素 的 内 联 元 素 ， 不 仅 padding 不 会 加 入 行 盒 高 度 的 计算 ，margin 
和 border 也 都 是 如 此 ， 都 是 不 计算 高 度 ， 但 实际 上 在 内 联合 周围 发 生 了 演 染 。 


4.2.2 padding 的 百分比 值 


关于 padding 的 属性 值 ， 其 实 没 多 少 好 说 的 。 其 一 ， 和 margin 属性 不 同 ，padding 属 
性 是 不 支持 负 值 的 ， 其 二 ，padding 支持 百分比 值 ， 但 是 ， 和 height 等 属性 的 百分比 计算 规则 
有 些 差 异 ， 差 异 在 于 : padding 百分比 值 无 论 是 水 平方 同 还 是 生 直 方 同 均 是 相对 于 宽度 计算 的 ! 

为 何 这 么 设计 呢 ? 首先 绝对 和 “ 死 循环 ”无 关 ， 相 对 高 度 计算 其 实 也 没什么 问题 。 我 个 人 
猜想 ， 如 果 牌 直 padding 相对 于 height 计算 ， 大 多 数 情 况 下 计算 值 都 是 0， 跟 摆设 没什么 
区 别 ， 还 不 如 相对 宽度 计算 ， 因 为 CSS 默认 的 是 水 平流 ， 计 算 值 一 直 会 有 效 ， 而 且 我 们 还 可 以 
利用 这 一 特性 实现 一 些 有 意思 的 布局 效果 。 也 就 是 面向 场景 和 需求 设计 ， 这 种 设计 可 以 让 我 们 
轻松 实现 上 自 适应 的 等 比例 矩形 效果 。 例 如 ， 使 用 

div { padding: 50%; } 

就 可 以 实现 一 个 正方 形 ， 如 果 这 样 : 

div { padding: 25% 50%; } 

就 得 到 了 一 个 宽 高 比 为 2:1 的 矩形 效果 。 

网 页 开 必 的 时 候 经 常会 有 横贯 整个 屏幕 的 头 网 效果 , 我 们 通 利 的 做 法 是 定 高 , 如 200 像素 高 ， 
屏幕 小 的 时 候 图 片 两 侧 内 容 隐 藏 。 然 而 ， 这 种 实现 有 一 个 问题 ， 就 是 类 似 笔记 本 这 样 的 小 屏幕 ， 
头 图 高 度 过 高 会 导致 下 面 主 体内 容 可 能 一 屏 都 实现 不 了 ， 但 是 ， 如 果 我 们 使 用 padding 进行 等 
比例 控制 ， 则 小 屏幕 下 头 图 高 度 天 然 等 比例 缩小 ， 没 有 任何 JavaScript， 却 依然 适 配 恨 好 ! 例如 : 

.box 1 


padding: 10% D50%;} 


position: relative; 







































































} 

.box > img { 
position: absolute; 
width: 100%; height: 100%; 
left: 0; top: 0; 

} 


瓯 实 现 了 一 个 宽 高 比 为 和 :1 的 比例 固定 的 头 图 效果 ， 上 述 方法 包括 IE6 在 内 的 浏览 器 都 兼容 。 

有 兴趣 可 以 自己 感受 一 下 ， 手 动 输 入 http:/demo.cssworld.cn/4/2-3.php。 改 变 浏 览 器 宽度 即 
可 感受 到 等 比例 的 变化 。 

上 面 百 分 比值 是 应 用 在 具有 块 状 特 性 的 元 素 上 的 ， 如 果 是 内 联 元 素 ， 会 有 怎样 的 表现 呢 ? 

。 同样 相对 于 宽度 计算 ; 

。 默认 的 高 度 和 宽度 细节 有 差异 ; 

e padding 会 断 行 。 

我 们 先 来 看 一 下 内 联 元 素 的 padding 晰 行 ， 代 码 如 下 : 
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.box { 
border: 2px dashed #cd0000; 
a 
padding: 50%; 
background-color: gray; 

ee 

效果 如 图 4-41 所 示 〈( 截 白 Chrome 浏览 器 )。 表 现 诡 异 之 处 有 : 
“内 有 ”两 字 不 见 了 ,“ 文 字 ” 两 字 届 右 显 示 了 ， 背 景区 域 非 定形 ， 
背景 色 宽度 和 外 部 容器 宽度 不 一 致 等 。 

CSS 的 很 多 现象 很 难 解 释 ， 原 因 在 于 其 表现 往往 是 多 个 属性 多 
个 规则 一 起 生效 的 结果 ， 并 非 单一 属性 作用 的 结果 。 例 如 这 里 的 例 
子 ， 虽 然 几 乎 没有 什么 实用 价值 ， 但 是 对 于 我 们 深入 理解 内 联 元 系 Sa 内 联 元 系 edd ng 
的 世界 很 有 帮助 。 百分比 值 的 诡异 表现 

对 于 内 联 元 素 , 其 padding 是 会 断 行 的 , 也 就 是 padding 区 域 是 跟着 内 联 盒 模型 中 的 行 
框 例子 走 的 ， 上 面 的 例子 由 于 文字 比较 多 ， 一 行 显 示 不 了 ， 于 是 “ 硅 干 ”两 字 换 到 了 下 一 行 ， 
于 是 ， 原 本 的 padding 区 域 也 跟着 一 起 挥 下 来 了 ， 根 据 后 来 居 上 的 层 羞 规则,“ 内 有 ”两 字 目 
然 束 正好 被 尾 盖 ， 于 是 看 不 见 了 ; 同时 ， 规 则 的 矩形 区 域 因为 换行 ， 也 变 成 了 五 条 边 ; 至 于 宽 
度 和 外 部 容器 例子 不 一 样 宽 ， 那 是 自然 的 ， 如 果 没 有 任何 文字 内 容 ， 那 自然 宽度 正好 和 容器 一 
致 ， 现 在 有 “内 有 文字 耕 干 ” 这 6 个 字 ， 实 际 宽 上 度 是 容器 宽度 和 这 6 个 字 和 宽度 的 总 和 ， 换 行 后 
的 宽度 要 想 和 容器 宽度 一 样 ， 那 可 真 要 徘 极 好 的 人 品 了 。 

这 么 一 分 析 ， 上 面 平时 很 少见 到 的 “诡异 ”现象 束 好 解释 了 。 

事情 还 没完 ， 我 们 再 看 一 个 现象 ， 假 如 是 空 的 内 联 元 素 ， 里 面 没 有 任何 文字 ， 仅 有 一 个 


<span> 标 签 : 



































<opans 内 省 文字 和/ ea 

此 时 ， 我 们 会 发 现 拓 然 最 终 背 景区 域 的 宽度 和 高 度 是 不 相等 
的 〈 见 图 4-42)， 这 不 科学 啊 ! padding:50g8 相 对 宽度 计算 ， 应 
该 出 来 是 个 正方 形 啊 ， 为 何 高 度 要 高 出 一 规 呢 ? 

原因 其 实 很 简单 : 内 联 元 素 的 垂直 Padding 会 让 “幽灵 空 
节点 ”显现 ， 也 就 是 规范 中 的 “strut” 出 现 。 

知道 了 原因 ， 要 解决 此 问题 惑 简单 了 。 由 于 内 联 元 素 默 认 的 ”图 442 空 内 联 元 素 padding 
高 度 完 全 受 font-size 大 小 控制 ， 因 此 ， 我 们 只 要 : 百分比 值 高 宽 不 一 














span { 
padding: 50%; 
font-size: 0; 
background-color: gray; 


} 
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此 时 ,“ 幽 元 空 日 节 点 ”高 度 变 成 了 0， 高 和 锅 天 会 一 样 ， 和 甘 状 元 素 一 样 的 正方 形 就 出 现 了 。 
可 以 看 到 ， 内 联 盒 模型 的 理论 知识 对 我 们 理解 内 联 元 系 的 各 种 表现 是 非常 有 价值 的 。 这 种 
理解 纯 靠 实践 ， 想 破 脑 袋 都 不 会 想 明 昌 为 什么 会 这 样 。 所 以 ， 进 行 深度 学 习 是 很 有 必要 的 。 


4.2.3 ”标签 元 素 内 置 的 padding 


说 一 下 你 可 能 不 知道 的 天 于 padding 的 一 些小 秘密 。 
(1) ol/ul 列表 内 置 padding-left, 但 是 单位 是 px 不 是 em。 例 如 ，Chrome 浏览 船 下 
是 40px， 由 于 使 用 的 是 px 这 个 绝对 单位 ， 因 此 ， 如 果 列 1. ol/l 元 素 内 置 padding-left , 但 
表 中 的 font-size 大 小 很 小 , 则 <1i> 元 素 的 项 目 符号 (如 
点 或 数字 ) 就 会 <ul>/<ol> 元 素 的 左边 缘 距 离 很 开 ， 如 果 4-43 ”项 目 符号 跑 到 <ol> 外 部 
font-size 比较 大 ， 则 项 目 符号 可 能 跑 到 <ul>/<ol> 元 素 的 外 面 ， 类 似 图 4-43 所 示 的 情况 。 
根据 我 目 己 的 经 验 , 当 font-size 是 12px 全 14px 时 ， 22px 是 比较 好 的 一 人 1 Padding— 
left 设 定 值 ， 所 有 浏览 器 都 能 正常 显示 ， 且 非常 贴近 边缘 。 


ol, ul { 
padding—-left: 22px; 

















} 

当然 ， 如 果 视 觉 要 求 比较 高 ， 使 用 content 计数 器 模拟 则 是 更 好 的 选择 。 

(2) 很 多 表单 元 素 都 内 置 padqing， 例 如 : 

e。 所 有 浏览 器 <input>/<textarea> 输 入 框 内 置 paddinog:; 

。 所 有 浏览 器 <button> 按 钮 内 置 padding: 

e。 部 分 浏览 器 <select> 下 拉 内 置 padding， 如 Firefox、IE8 及 以 上 版 本 浏览 器 可 以 设 
置 paddinog: 

。 所 有 浏览 器 <radio>/<chexkbox> 单 复 选 框 无 内 置 paddinog:; 

e <button> 按 钮 元 隶 的 Padding 最 难 控 制 |! 

我 们 看 章 看 一 下 <button> 按 钮 元 素 的 padding。 在 Chrome 浏览 器 下 ， 我 们 设置 : 





button { padding: 0; } 
按钮 的 padding 就 变 成 了 0， 但 是 在 Firefox 浏览 器 下 ， 左 右 依 然 有 padding， 如 图 4-44 所 
不 。 可 以 试 试 使 用 : 

button: :~-moz-focus-inner { padding: 0; } 


此 时 按钮 就 会 如 图 4-45 所 示 。 











按钮 


4-44 ”Firefox 按钮 padding:0 效果 有 限 图 4-45 ”Firefox 按钮 padqing 去 除 后 的 效果 





而 在 IE7 浏览 器 下 ， 文 字 如 果 变 多 ， 那 么 左右 padding 逐渐 变 大 ， 如 图 4-46 所 示 。 需 要 
进行 如 下 设置 : 
button { overflow: visible; } 


此 时 按钮 表现 符合 预期 ， 如 图 4-47 所 示 。 


外接 达 包 | | 
大 钮 按钮 按钮 按钮 | ER 


4-46 ” 控 钮 文字 越 多 padqding 越 大 图 4-47 按钮 padqing 大 小 不 受 文字 个 数 的 影响 
最 后 ， 按 钮 padding 与 高 度 计 算 不 同 浏览 喜 下 千差万别 ， 例 如 


button { 
line-height: 20px; 





padding: 1l10px; 
border: none; 


} 


结果 ， 在 Chrome 浏览 器 下 是 预期 的 40 像素 ， 然 而 Firefox 浏览 器 下 是 莫名 其 妙 的 42 像素 ， 在 
IE7 浏览 器 下 更 是 匪夷所思 的 45 像素 ， 这 使 我 们 平常 制作 网 页 的 时 候 很 少 使 用 原生 的 
<button> 按 钮 作为 点 击 按钮 ， 而 是 使 用 <a> 标 签 来 模拟 。 但 是 ， 在 表单 中 ， 有 时 候 按钮 是 自 市 
交互 行为 的 ， 这 是 <a> 标 签 无 法 模拟 的 。 我 这 里 给 大 家 推荐 一 个 既 语 义 良好 行为 保留 ， 同 时 UI 
效果 棱 兼 容 效 果 好 的 实现 小 技巧 ， 那 就 是 使 用 <labe1l> 元 系 ，HTML 和 CSS 如 下 : 


<button id="btn"></button> 
<label for="btn"> 按 钮 </label> 























button { 
position: absolute; 
clip: rect(0 0 0 0);，; 

} 

label { 
display: inline-block; 
line-height: 20px; 
padding: 1l10px; 

} 


<labe1l> 元 系 的 for 属性 值 和 <button> 元 素 的 id 值 对 应 即 可 。 此 时 ， 所 有 浏览 郁 下 的 
按钮 高 度 都 是 40 像素 ， 而 且 <button> 元 系 的 行为 也 都 保留 了 ， 有 是 非常 不 错 的 实践 技巧 。 


4.2.4 Padding 与 图 形 绘制 
padding 属性 和 background-clip 属性 配合 , 可 以 在 有 限 的 标签 下 实现 一 些 CSS 图 形 
绘制 效果 ， 我 这 里 抛砖引玉 ， 举 两 个 小 例子 ， 重 在 展示 可 行 性 。 


例 1: 不 使 用 伪 元 素 ， 仅 一 层 标签 实现 大 队长 的 “三 道 本 ”分 类 图 标 效果 。 此 效果 在 移动 
端 比较 常见 ， 类 似 于 图 4-48 最 右边 的 小 图 标 。 
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< 4 二 
图 4-48 “三 道 枉 ”小 图 标示 意 


我 们 可 以 使 用 类 似 下 面 的 CSS 代码 (10 倍 大 小 模拟 ) 实现 : 


.lcon-menu { 
display: inline-block; 
width: 140px; height: 1l10px; 
padding: 35px 0;，; 
border-top: lO0px solid; 
border-bottom: lO0px solid; 
background-color: currentColor; 
background-clip: content-box; 


} 


例 2: 不 使 用 伪 元 素 ， 仅 一 层 标 签 实现 双 层 圆 点 效果 。 此 效果 
在 移动 端 也 比较 常见 ， 类 似 于 图 4-49, 在 多 个 广告 图 片 切换 时 ， 用 
来 标识 当前 显示 的 是 哪 张 图 。 
我 们 可 以 使 用 类 似 下 面 的 CSS 代码 (10 倍 大 小 模拟 ) 实现 : 
.icon-dot { 图 4-49 ” 双 层 圆 点 图 形 示 意 
display: inline-block; 


width: 1l100px; height: 1l100px; 
padding: 1l10px; 

















border: lO0px solid; 
border-radius: 50%; 
background-color: currentColor; 


background-clip: content-box; 


这 两 个 例子 实现 的 图 形 效 果 如 图 4-50 所 示 。 有 兴趣 可 以 自己 感受 一 下 ， 手 动 输入 
http://demo.cssworld.cn/4/2-4.php 或 者 扫 下 面 的 二 维 码 即 可 。 











图 4-50 “三 道 枉 ”和 双 层 圆 点 图 形 效果 


4.3 激进 的 margin 属性 


padding 性 格 温 和 ， 负 贡 内 间距 ; 而 margin 则 比较 激进 ， 负 贡 外 间距 。 虽 然 都 是 间距 ， 
但 是 差别 相当 大 ， 尤 其 是 margin， 特 异 之 处 相当 多 。 





4.3.1 margin 与 元 素 尺 十 以 及 相 天 布局 


1. 元 素 尺寸 的 相关 概念 
下 面 的 内 容 会 罕 扯 到 各 类 包含 “尺寸 ”字样 的 名 词 ， 为 了 大 家 在 阅读 的 时 候 不 产生 困扰 ， 
这 里 专门 把 相关 概念 梳理 一 下 。 

我 们 这 里 的 各 类 “尺寸 ”命名 和 对 应 的 盒子 类 型 全 部 参考 目 jQuery 中 与 尺寸 相关 API 的 名 称 。 

e。 元 素 尺 寸 : 对 应 jQuery 中 的 $ () .width() 和 $ () .height () 方 法 ， 包括 padding 
和 jporder, 也 束 是 元 际 的 border box 的 尺寸 ,在 原生 的 DOM API 中 写作 offsetwidth 
和 offsetHeight， 所 以 ， 有 时 候 也 成 为 “元 系 偏 移 尺 寸 ”。 

e。 元 素 内 部 尺寸 : 对 应 jQuery 中 的 $ () .innerwidth() 和 $ () .innerHeight () 方 法 ， 
表示 元 素 的 内 部 区 域 尺 寸 ， 包 括 padding 但 不 包括 porder， 也 就 是 元 系 的 padding 
box 的 尺寸 。 在 原生 的 DOM API 中 写作 clientwiqdth 和 clientHeight， 所 以 ， 
有 时 候 也 称 为 “元 系 可 视 尺 寸 ”。 

。 元 素 外 部 尺寸 : 对 应 jQuery 中 的 $() .outerWidth(true) 和 $ () .outerHeight 
(true) 方 法 , 表示 元 系 的 外 部 尺寸 , 不 仪 包括 padding 和 border,， 还 包括 margin, 
也 束 是 元 系 的 margin box 的 尺寸 。 没 有 相对 应 的 原生 的 DOM API。 

“外 部 尺寸 ”有 个 很 不 一 样 的 特性 ， 束 是 尺寸 的 大 小 有 可 能 是 负数 ， 没 错 ， 负 尺寸 。 这 和 我 们 现 

实 世 界 对 尺寸 的 认 知 明显 冲突 了 ， 因 为 现实 世界 没有 什么 物体 的 尺寸 是 负 的 。 所 以 ， 我 忌 是 把 “外 部 
尺寸 ”理解 为 “元 素 占 据 的 空间 尺寸 "”， 把 概念 从 “尺寸 ”转换 到 “空间 ” 这 时 候 就 容易 理解 多 了 。 

2. margin 与 元 素 的 内 部 尺寸 

margin 同样 可 以 改变 元 素 的 可 视 尺 寸 , 但 是 和 paqdding 几乎 是 互补 态势 。 什 么 意思 呢 ? 

对 于 padding， 元 素 设 定 了 wigdth 或 者 保持 “ 包 囊 性 ”的 时 候 ， 会 改变 元 素 可 视 斥 寸 ; 但 是 

对 于 margin 则 相反 ， 元 素 设 定 了 wiaqth 值 或 者 保持 “ 包 里 性 ”的 时 候 ，margin 对 尺寸 没有 

影响 ， 只 有 元 系 是 “充分 利用 可 用 空间 ”状态 的 时 候 ，margin 才 可 以 改变 元 素 的 可 视 斥 寸 。 
比方 说 ， 如 下 CSS: 

全 人 ie 二 

width: 300px; 


margin: 0 -20px; 


} 
此 时 元 素 宽度 还 是 300 像素 ， 尺 寸 无 变化 。 因 为 只 要 宽度 设 定 ，margin 右 无 法 改变 元 素 尺 寸 ， 
这 和 padding 是 不 一 样 的 。 

但 是 ， 如 果 是 下 面 这 样 的 HTML 和 CSS: 


<div class="father"> 







































































<div class="son"></div> 
</div> 
.father { width: 300px; } 
.Son { margin: 0 -20px; |} 
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则 .son 元素 的 宽度 就 是 340 像 系 了 ， 尺 寸 通过 负 值 设置 变 大 了 ， 因 为 此 时 的 宽度 表现 是 “ 充 
分 利用 可 用 空间 ”。 

或 者 这 么 说 吧 ， 只 要 元 系 的 尺寸 表现 符合 “充分 利用 可 用 空间 ”， 无 论 是 垂直 方 癌 还 是 水 
平方 器 ， 都 可 以 通过 margin 改变 尺寸 。 

CSS 世界 默认 的 流 方向 是 水 平方 向 ， 因 此 ， 对 于 普通 流体 元 素 ，margin 只 能 改变 元 素 水 
平方 向 尺 寸 ; 但 是 ， 对 于 具有 拉 伸 特性 的 绝对 定位 元 素 ， 则 水 平 或 垂直 方 同 都 可 以 ， 因 为 此 时 
的 尺寸 表现 符合 “元 分 利用 可 用 空间 ” 这 在 4.3.4 市 会 继续 深入 。 

由 于 margin 共有 这 种 流体 特性 下 的 改变 尺寸 特性 ， 因 此 ，margin 可 以 很 方便 地 实现 很 
多 流体 布局 效果 。 例 如 ， 0 适应 布局 效果 ， 假 设 我 们 定 宽 的 部 分 是 128 像素 宽 
的 图 片 ， 自 适应 的 部 分 古文 

(1) A 


.box { overflow: hidden; } 
.box > img { float: left; } 
.box > P { margin-left: 140px; } 
































<div class="box"> 
<img src="1.jJpg"> 
XS CN BS 
</div> 


此 时 ， 文 池内 容 束 会 根据 .box 盒子 的 宽度 变化 而 目 动 排列 ， 形 成 自 适 应 布局 效果 ， 无 论 盒子 
是 200 像素 还 是 400 像 系 ， 布 局 依然 良好 ， 不 会 像 纯 浮动 布局 那样 发 生 错 位 。 

(2) 如 果 图 片 右 侧 定 位 : 只 要 图 片 的 左 浮动 改 成 右 浮 动 ， 文 字 内 容 的 左 margin 改 成 右 
margin 即 可 。 

















.box { overflow: hidden; } 
.box > img { float: right; } 
.box > P { margin-~-right: 140px; } 


HTML 和 上 面 的 左 侧 定位 效果 一 模 一 样 ， 最 终 实 现 的 也 是 一 个 效果 良好 的 自 适 应 布局 。 然 
而 ， 这 里 的 实现 有 一 点 瑕 竟 ， 那 就 是 元 素 在 DOM 文档 流 中 的 前 后 顺序 和 视觉 表现 上 的 前 后 顺 
序 不 一 狼 。 什 竣 意 思 昵 ? 我 们 这 时 的 图 所 是 右 举 动 ， 视觉 表现 在 .box 的 右 侧 ， 但 是 图 片 相关 
的 HTML 代码 却 在 前 面 。 这 个 相反 的 位 置 关系 有 时 候 会 给 其 他 同事 造成 一 些 困 难 。 所 以 ， 如 果 
想 要 实现 顺序 完美 一 致 的 自 适应 效果 ， 可 以 借助 margin 负 值 定位 实现 。 

(3) 如 采 图 卢 右 侧 定 位 ， 同 时 顺序 一 致 : 


.box { overflow: hidden; } 


.full { width: 100%; float: left; } 
.box > img { float: left; margin-left: -128px; } 























.full >p { margin-right: 140px; } 
<div class="box"> 
<div class="full"> 
> A A > 
</div> 
<img src="1.jJpg"> 
</div> 
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4/3-1.php 或 者 扫 右 侧 的 二 维 但 。 

我 们 还 可 以 利用 margin 改变 元 素 尺 寸 的 特性 来 实现 两 应 对齐 布局 效 
果 。 列 表 是 我 们 Web 开发 中 是 非常 香 见 的 ， 一 般 都 是 通过 循环 过 有 历 呈 现 出 
来 的 ， 也 就 是 实际 上 每 个 列表 的 HTML 样式 都 是 一 致 的 。 现 在 有 这 样 一 个 
需求 : 列表 块 两 端 对 齐 , 一 行 显示 3 个, 中 间 有 2 个 20 像素 的 间 际 。 假如 我 们 使 用 浮动 来 实现 ， 
CSS 代码 可 能 是 下 面 这 样 : 

11i { 

float: left; 


width: 1l100px; 
margin-right: 20px; 








} 
此 时 束 遇 到 了 一 个 问题 ， 即 最 右 侧 永远 有 个 20 像素 的 间 际 ， 无 法 完美 实现 两 端 对 齐 ， 如 
图 4-51 所 示 。 
列表 3 
之 





择 不 土 的 间 降 


图 4-51 右 侧 间 际 示意 
如 果 不 考虑 下 8， 我 们 可 以 使 用 CSS3 的 nth-of-type 选择 器 : 
li:nth-of-type(3n) { 


margin-right: 0; 


} 

但 如 果 需 要 兼容 IE8 那么 nth-of-type 束 无 能 为 力 了 。 要 么 专门 使 用 JavaScript 打 个 补 
丁 ， 要 么 列表 HTML 输出 的 时 候 给 符合 3n 的 <1i> 标 签 加 个 类 名 。 例 如 .1i-thirad: 

.1i-thirgd f 


margin-right: 0; 


} 

然而 这 种 技术 选 型 ， 需 要 HTML 志 辑 和 CSS 样式 相互 配合 才能 生效 ， 相 比 纯 CSS 控制 而 
言 后 期 风险 和 维护 成 本 提高 了 一 倍 ， 那 有 没有 更 好 的 实现 方法 呢 ? 

有 ! 我 们 可 以 通过 给 父 容 需 添 加 margin 属性 ， 增 加 容 喜 的 可 用 宽度 来 实现 。 











ul { 
margin-right: -20px; 
} 
ul > 1 1{ 
float: left; 
width: 1l100px; 
margin-right: 20px; 
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此 时 <ul> 的 宽度 束 相 当 于 100%+20px， 于 是 ， 第 3n 的 <1i> 标 签 的 margin-right: 
20px 就 多 了 20 像素 的 使 用 空间 ， 正 好 列表 的 右边 缘 就 是 父 级 <ul> 容 器 100% 宽 上 度 位 置 ， 两 端 
对 齐 效果 就 此 实现 了 ， 如 图 4-52 所 示 。 








列表 2 列表 3 
一 7 





祥 级 芝 去 问 队 


图 4-52 ” 右 侧 间 隐 被 父 容 硕 市 走 了 


3. margin 与 元 素 的 外 部 尺寸 

对 于 普通 块 状元 素 ， 在 默认 的 水 平流 下 ，margin 只 能 改变 左右 方 回 的 内 部 尺寸 ， 生 直方 
问 则 无 法 改变 。 知 归 我 们 使 用 writing-mode 改变 流 同 为 垂直 流 ， 则 水 平方 向 内 部 尺寸 无 法 
改变 ， 告 直方 癌 可 以 改变 。 这 是 由 mazrgin:auto 的 计算 规则 决定 的 。 

但 是 ， 对 于 外 部 尺寸 ,margin 属性 的 影响 则 更 为 广泛 ， 只 要 元 素 具有 块 状 特性 ， 无 论 有 没有 
设置 width/height, 无 论 是 水 平方 同 还 是 和 垩 直方 同 ， 即 使 友 生 了 margin 合并 ， margin 对 处 
部 尺寸 都 着 着实 实 故 生 了 影响 。 只 是 很 多 时 候 ， 抛 开 定 位 而 言 ， 我 们 似乎 对 外 部 尺寸 的 变化 不 是 很 
敏感 ， 实 际 上 ，CSS 世界 中 不 少 来 手 的 问题 都 是 需要 借助 margin 的 外 部 尺寸 特性 来 实现 的 。 

前 面 讲 padding 的 时 候 ， 我们 说 过 它 没 有 什么 莱 容 性 问题 。 实 际 上 ，padding 是 有 不 莱 
容 的 ， 只 是 这 个 不 兼容 不 常 遇 到 ， 即 使 过 到 ， 也 很 容易 被 不 太 敏 感 的 人 “一 笔 禹 过 ”。 此 兼容 问 
题 描 述 为 ， 如 果 容 器 可 以 深 动 ， 在 下 和 Firefox 浏览 器 下 是 会 忽略 padding-bottom 值 的 ， 

Chrome 等 浏览 妖 则 不 会 。 也 就 是 说 ， 在 下 和 Firefox 浏览 器 下 ， 


<div style="height:100px; padding:50px 0;"> 








<img src="0.jpg" height="300"> 
</div> 


底部 没有 50 像素 的 padding-bottom 间 际 ， 如 图 4-53 所 示 。 

此 兼容 性 差异 的 本 质 区 别 在 于 : Chrome 浏览 
器 是 子 元 素 超 过 content box 尺寸 触 友 深 动 条 显示 ， 
而 I 正和 Firefox 浏览 器 是 超过 padding box 尺寸 触 
发 深 动 条 显示 。 

由 于 规范 中 并 没有 找到 准确 的 说 明 ， 因 此 ， 浏 
览 器 之 间 不 同 的 做 法 不 能 说 熟 对 束 错 ， 可 以 看 成 是 
一 种 “未 定义 行为 "一般 而 言 ， 开 发 人 员 更 喜欢 ”图 453 Padding-bottonm 候 深 动容 器 名 略 
Chrome 的 做 法 , 因为 其 更 好 理解 。 总 之 , 不 管 怎样 , 深 动 容器 底部 留 白 使 用 padding 是 不 推荐 的 ， 
因为 兼容 性 是 个 大 问题 。 但 是 , 我 们 可 以 借助 margin 的 外 部 尺寸 特性 来 实现 底部 留 白 , 代码 如 下 : 

<div style="height:200px;"> 


<img height="300" style="margin:50px 0;"> 
</div> 





ne 
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结 末 所 有 浏览 磺 都 成 功 留 日 ， 如 图 4-54 所 示 。 

记 住 了 ， 只 能 使 用 子 元 素 的 margin-bottom 来 实现 深 动 容器 的 底部 留 白 。 

下 面 再 举 一 个 利用 margin 外 部 尺寸 实 WN 
现 等 高 布局 的 经 典 案 例 。 此 布局 多 出 现在 分 栏 y 
有 背景 色 或 者 中 间 有 分 阳线 的 布局 中 ， 有 可 能 
左 侧 栏 内 容 多 ， 也 有 可 能 右 侧 栏 内 容 多 ， 但 无 
论 内 容 多 少 ， 两 栏 背 景色 都 和 容器 一 样 高 。 

由 于 height :100% 需 要 在 父 级 设 定 具体 
高 上 度 值 时 才 有 效 ， 因 此 我 们 需要 使 用 其 他 技巧 
来 实现 。 方 法 其 实 很 多 ,例如 使 用 display: 
table-cell 布局 ， 左 右 两 栏 作为 单元 格 处 理 ， 或 者 使 用 border 边框 来 模拟 ， 再 或 者 使 用 我 
们 这 里 的 margin 负 值 实现 ， 核 心 CSS 代码 如 下 : 


.Column—box { 
overflow: hidden; 
} 


.Column—left, 





™ 











4-54 _ margin-bottonm 滚动 留 白 





.Column—right { 
margin-bottom: -9999px; 
Padding-bottom: 9999px; 

} 


要 看 演示 效果 ， 可 以 手动 输入 http://demo.cssworld.cn/4/3-2.php 或 者 扫 下 面 的 二 维 码 。 点 击 
按钮 增 减 左右 两 栏 的 内 容 改变 高 度 束 会 有 发现， 无 论 是 左 侧 内 容 多 还 是 右 侧 内 容 多 ， 两 栏 的 背景 
高 度 都 是 一 样 的 ， 如 图 4-55 所 示 。 














图 4-55 ”等 高 布局 效果 示意 
下 面 问题 来 了 : 为 什么 可 以 实现 等 高 呢 ? 








于 直方 网 margin 无 法 改变 元 系 的 内 部 尺寸 ， 但 却 能 改变 外 部 尺寸 ， 这 里 我 们 设置 了 
margin-bottom:-9999px 辣 味 痢 元 系 的 外 部 尺寸 在 竺 直方 同上 小 了 9999px。 默 认 情 况 下 ， 和 于 
直方 同 块 级 元 素 上 下 距离 是 0, 一 旦 margqlin= bottom:=999090x 束 意 味 厦 后面 有 所 有 元 系 和 和 上面 元 
素 的 空间 距离 变 成 了 -9999px， 也 就 是 后 面 元 素 都 往 上 移动 了 9999px。 此 时 ， 通 过 神 来 一 笔 
paddqing-bottom:9999px 增加 元 素 高 度 ， 这 正 负 一 抵消 ， 对 布局 层 并 无 影响 ， 但 却 带 来 了 我 们 
需要 的 东西 一 一 视觉 层 多 了 9999px 高 度 的 可 使 用 的 背景 色 。 但 是 ，9999px 太 大 了 ， 所 以 需要 配 
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合 父 级 overflow:hidden 把 多 出 来 的 色 块 背景 隐藏 反 ， 于 是 实现 了 视觉 上 的 等 高 布局 效果 。 
使 用 margin 负 值 实现 等 高 布局 的 优势 在 于 兼容 性 足够 ，IE6 浏览 器 也 文 持 ， 且 文 持 任意 
个 分 栏 等 高 布局 。 本 例 中 ， Badding=bottom:99990x 也 可 以 用 border-bottom: 9099B 
solid transparent 代 蔡 ， 不 过 IE7 以 上 浏览 器 才 文 持 。 大 家 可 以 根据 实际 场景 选择 使 用 。 
不 过 ，margin 负 值 实现 等 局 布局 也 有 不 足 之 处 : 首先 ， 如 有 果 需 要 有 子 元 素 定 位 到 容 髓 之 
外 ， 父 级 的 overflow:hidden 和 是 一 个 环 手 的 限制 : 其 次 ， 当 触发 销 点 定位 或 者 使 用 
DOM.scrol1Intoview() 方 法 的 时 候 ， 可 能 融会 出 现 奇 怪 的 定位 问题 ， 根 本 原因 参见 6.4 市 。 
顺便 说 说 使 用 porder 和 table-cell 的 优 和 缺点 : 前 者 优势 在 于 兼容 性 好 ， 没 有 销 点 定 
位 的 隐患 ， 不 足 之 处 在 于 最 多 3 栏 ， 且 由 于 bordqez 不 支持 百分比 宽度 ， 因 此 只 能 实现 至 少 一 
侧 定 宽 的 布局 ， table-cell 的 优点 是 天 然 等 蜗 ， 不 足 在 于 IE8 及 以 上 版 本 浏览 器 才 文 持 ， 所 
以 ， 如 果 项 目 无 须 兼 容 IE6、IE7， 则 推荐 使 用 table-cell 实现 等 高 布局 。 
上 述 margin 对 尺寸 的 影响 是 针对 具有 块 状 特性 的 元 素 而 言 的 ,对 于 纯 内 联 元 系 则 不 适用 。 
和 padding 不 同 ， 内 联 元 素 算 直方 向 的 margin 是 没有 任何 影响 的 ， 既 不 会 影响 外 部 尺寸 ， 
也 不 会 影响 内 部 尺寸 ， 有 种 石沉大海 的 感觉 。 对 于 水 平方 向 ， 由 于 内 联 元 素 宽度 表现 为 “ 包 囊 
性 ”也 不 会 影响 内 部 尺寸 。 


4.3.2 margin 的 百分比 值 


和 padding 属性 一 样 , margin 的 百分比 值 无 论 是 水 平方 向 还 是 垂直 方 回 都 是 相对 于 宽度 计算 
的 。 不 过 相对 于 padding，margin 的 百分比 值 的 应 用 价值 束 低 了 一 稚 ， 根 本 原因 在 于 和 padding 
不 同 ,元 系 设置 margin 在 垂直 方 同 上 无 法 改变 元 素 目 映 的 内 部 扩 寸 ,往往 需要 父 元 素 作为 载体 ， 此 
外 ， 由 于 margin 合并 的 存在 ， 和 圣 直 方 癌 往往 需要 双 僧 尺寸 才能 和 padqdqing 表现 一 致 。 例 如 : 


.box { 
background-color: olive; 
















































































overflow: hidden; 
} 
.box > Qi { 
margin: 50%; 
} 
<div class="box"> 
<div></div> 
</div> 
结果 .box 是 一 个 宽 高 比 为 2:1 的 橄榄 绿 长 方形 。 是 不 是 有 点 儿 奇 怪 : 50%+50% 应 该 是 100%， 
应 该 上 下 一 样 ， 是 1:1 的 正方 形 ， 怎 么 最 后 是 2:1 的 长 方形 呢 ? 
这 就 涉及 下 面 一 市 margin 合并 的 内 容 了 。 


4.3.3 正确 看 待 CSS 世界 里 的 margin 合并 


1. 什么 是 margin 合并 
块 级 元 素 的 上 外 边 距 (margin-top) 与 下 外 边 距 (margin-bottom) 有 时 会 合并 为 单 
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个 外 边 距 ， 这 样 的 现象 称 为 “margin 合并 ” 从 此 定义 上 ， 我 们 可 以 捕获 两 点 重要 的 信息 。 

(1) 块 级 元 素 ， 但 不 包括 浮动 和 绝对 定位 元 素 ， 尺 管 浮动 和 绝对 定位 可 以 让 元 素 块 状 化 。 

(2) 只 发 生 在 重 直 方向 ， 需 要 注意 的 是 ， 这 种 说 法 在 不 考虑 writing-mode 的 情况 下 才 
是 正确 的 ， 严 格 来 讲 ， 应 该 是 只 发 生 在 和 当前 文档 流 方 回 的 相 垂 直 的 方 加 上。 由 于 默认 文档 流 
是 水 平流 ， 因 此 发 生 margin 合并 的 就 是 垂直 方向 。 

2. margin 合并 的 3 种 场景 

margin 合并 有 以 下 3 种 场景 。 

(1) 相 领 兄弟 元 素 margin 合 并。 这 是 margin 合并 中 最 常见 、 最 基本 的 ， 例 如 : 

p { margin: lem 0; } 

<B> 宙 1 /p> 

<p> 第 二 行 </p> 
则 第 一 行 和 第 二 行 之 则 的 间距 还 是 lem， 因 为 第 一 行 的 margin-bottom 和 第 二 行 的 
margin-top 合并 在 一 起 了 ， 并 非 上 下 相 加 。 

(2) 父 级 和 第 一 个 /最 后 一 个 子 元 素 。 我 们 直接 看 例子 ， 在 默认 状态 下 ， 下 面 3 种 设置 是 等 
效 的 : 


<div class="father"> 














<div class="son" style="margin-top:80px;"></div> 
</div> 


<div class="father" style="margin-top:80px;"> 
<div class="son"></div> 
</div> 


<div class="father" style="margin-top:80px;"> 
<div class="son" style="margin-top:80px;"></div> 
</div> 


在 实际 开发 的 时 候 ， 给 我 们 这 来 腑 烦 的 多 半 就 是 这 里 的 父子 margin 合 3 

比方 说 ， 现 在 流行 官网 使 用 一 张 帅 帅 的 大 图 ， 然 后 配 上 大 大 的 网 站 标 
题 。 由 于 这 个 标题 一 般 在 头 独 中 间 的 某 位 置 ， 因此， 我 们 很 自然 会 想到 使 用 
margin-top 定位 ， 然 后 问题 就 来 了 。 因 为 发 生 了 “奇怪 ”的 事情 ， 头 图 拓 然 
挥 下 来 了 ! 针 对 此 现象 , 我 特意 制作 了 一 个 实例 , 手动 输入 http:/demo.cssworld.cn/ 
4/3-3.php 或 者 扫 右 侧 的 二 维 码 。 

问题 产生 的 原因 残 是 这 里 的 父子 margin 合并 。 这 里 大 家 需要 理 清楚 “合并 ”这 个 概念 。 
如 果 我 们 按照 中 文 释义 理解 ， 应 该 必须 有 多 个 对 象 才能 进行 合并 ， 人 否则 根本 就 没有 “ 合 ” 这 一 
说 ， 确 实 如 此 。 但 是 ， 这 样 理解 也 有 可 能 会 带 来 这 样 一 个 误区 ， 即 你 要 出 点 儿 力 ， 我 要 出 点 儿 
力 ， 才 叫 “ 合 ”其 实 不 然 。 放 到 我 们 这 里 ， 这 个 父子 margin 合并 的 案例 上 融 是 : 父 元 素 没 有 
出 一 点 力 ， 子 元 素 出 了 全 部 的 力 ， 然 后 最 终 的 margin 全 部 合 到 了 父 元 素 上 。 也 就 是 虽然 是 在 
子 元 素 上 设置 的 margin-top, 但 实际 上 残 等 同 于 在 父 元 素 上 设置 了 margin-top,， 我 想 这 样 
大 家 束 能 理解 为 何 头 图 会 挥 下 来 了 吧 。 但 是 有 一 点 需要 注意 ,“ 等 同 于 ”并 不 是 “就 是 ”的 意思 ， 
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我 们 使 用 getcomputedstyle 方法 获取 父 元 素 的 margin-top 值 还 是 CSS 属性 中 设置 值 ， 
并 非 margin 合并 的 表现 值 。 

那 该 如 何 阻止 这 里 margin 合并 的 发 生 呢 ? 

对 于 margin-top 合并 ， 可 以 进行 如 下 操作 (满足 一 个 条 件 即 可 ): 

。 父 元 素 设 置 为 块 状 格式 化 上 下 文 元 素 ; 

。 父 元 系 设 置 border-top 值 ; 

。 父 元 素 设 置 paddqing-top 值 ; 

。 父 元 系 和 第 一 个 子 元 素 之 间 琴 加 内 联 元 素 进行 分 隔 。 

对 于 margin-bottom 合并 ， 可 以 进行 如 下 操作 (满足 一 个 条 件 即 可 ): 

。 父 元 素 设 置 为 块 状 格式 化 上 下 文 元 素 ; 

。 ” 父 元 系 设 置 border-bottom 值 ; 

。 父 元 素 设置 padding-bottom 值 ; 

。 父 元 素 和 最 后 一 个 子 元 素 之 间 琴 加 内 联 元 际 进 行 分 隅 ; 

。 ” 父 元 系 设 置 height、min-height 或 max-height。 

所 以 ， 上面 因 为 margin 合并 导致 头 图 挥 下 来 的 问题 可 以 添加 下 面 的 CSS 代码 进行 
修复 : 




















SN 


.Container { 
overflow: hidden; 


} 
其 原理 就 是 通过 设置 overflow 属性 让 父 级 元 素 块 状 格 式 化 上 下 文 ， 这 在 6.4 市 会 有 深入 的 
探讨 。 

说 到 此 处 , 怒 不 住 再 多 说 几 句 ,jQuery 中 有 个 $() .slideUp() /$() .slideDown() 方 法 ， 
如 采 在 使 用 这 个 动画 效果 的 时 候 ， 发 现 这 内 容 在 动画 开始 或 结束 的 时 候 会 跳 一 下 ， 那 八 九 不 离 
十 就 是 布局 存在 margin 合并 。 跳动 之 所 以 产生 , 束 是 因为 jQuery 的 slideUp 和 slideDown 
方法 在 执行 的 时 候 会 被 对 象 元 素 谎 加 overflow:hidden 设置 , 而 overflow: hidden 会 阻 
止 margin 合并 ， 于 是 一 瞬间 间距 变 大 ， 产 生 了 跳动 。 

(3) 空 块 级 元 素 的 margin 合并 。 例 如 ， 下 面 CSS 和 HTML 代码 : 





.father { overflow: hidden; } 

.Son { margin: lem 0; } 

<div class="father"> 

<div class="son"></div> 

</div> 
结果 ， 此 时 .father 所 在 的 这 个 父 级 <dqiv> 元 素 高 度 仅 仅 是 1eam， 因 为 .son 这 个 空 <div> 元 
素 的 margin-top 和 mardin-bottonm 合并 在 一 起 了 。 这 也 是 上 一 节 margin: 50% 最 终 宽 高 
比 是 2:1 的 原因 ， 因 为 垂直 方向 的 上 下 margin 值 合 二 为 一 了 ， 所 以 垂直 方向 的 外 部 尺寸 只 有 
水 平方 同 的 一 半 。 











这 种 空 块 级 元 素 的 margin 合并 特性 即使 自身 没有 设置 margin 也 是 会 发 生 的 ， 所 谓 “ 合 ” 
并 不 一 定 要 上 自己 出 力 ， 只 要 出 人 就 可 以 。 比 方 说 ， 我 们 一 开始 的 “ 相 邻 兄 第 元 素 margin 合并 ”， 
其 实 ， 了 就算 兄弟 不 相 邻 ， 也 是 可 以 有 友和 后 合并 的 ， 前 提 是 中 间 插 手 的 也 是 个 会 合并 的 家 伙 。 比 方 说 : 

i i 

<p> 第 一 行 </p> 

<div></div> 

<p> 第 二 行 </p> 
此 时 第 一 行 和 第 二 行 之 间 的 距离 还 是 1sam， 中 间 看 上 去 隔 了 一 个 <daiv> 元 素 ， 但 对 最 终 效果 却 
没有 任何 影响 。 如 果 非 要 细 究 ， 则 实际 上 这 里 发 生 了 3 次 margin 合并 ，<div> 和 第 一 行 <p> 
的 margin-bottonm 合并 , 然后 和 第 二 行 <p> 的 margin-top 合并 , 这 两 次 合并 是 相 邻 兄弟 合 
并 。 由 于 上 自 号 是 空 <div>， 于 是 前 两 次 合并 的 margin-bottom 和 margin-top 再 次 合并 ， 
这 灵 合 并 是 空 块 级 元 系 合 并 ， 于 是 最 终 间 距 还 是 1em。 

根据 我 多 年 开发 的 经 验 , 由 于 空 块 级 元 素 的 margin 合并 发 生 不 愉快 事情 的 情况 非常 之 少 。 
一 来 ， 我 们 很 少 会 在 页 面 上 放置 没什么 用 的 空 <div>; 二 来 ， 即 使 使 用 空 <div> 也 是 画 画 分 隔 
线 之 类 的 ， 一 般 都 是 使 用 borqdezt 属性 ， 正 好 可 以 阻 断 margin 合并 ; 三 来 ，CSS 开发 人 员 普 
裔 没有 margin 上 和 下 同时 开工 的 习惯 ， 比 方 说 一 个 列表 ， 间 距 都 是 一 样 的 ， 开 发 人 员 一 般 都 是 
单独 设 定 margin-top 或 margin—-bottom 值 ， 因 为 这 会 让 他 们 内 心 党 得 更 安全 。 于 是 ， 最 
终 , 空 块 级 元 素 的 margin 合并 就 变 成 了 一 个 对 CSS 世界 有 着 具有 巨大 意义 但 大 多 数 人 都 不 知 
道 的 特性 。 

如 果 有 人 不 希望 空 <div> 元 素 有 margin 合并 ， 可 以 进行 如 下 操作 : 

。 设置 牌 直方 同 的 border; 

。 设置 重 直 方 回 的 Padadqlnd; 

e。 里 面 添加 内 联 元 素 〈 直 接 Space 键 空格 是 没 用 的 ); 

。 ，” 议 置 height 或 者 min-height。 

3. margin 合并 的 计算 规则 

我 把 margin 合并 的 计算 规则 总 结 为 “ 正 正 取 大 值 ” 正 负 值 相 加 ”“ 负 负 最 负 值 ”3 句 话 。 
下 面 来 分 别 举 例 说 明 。 

(1) 正 正 取 大 值 。 如 果 是 相 邻 兄弟 合并 : 


.a { margin-bottom: SOpx; } 







































































.b { margin-top: 20px; } 
<div class="a"></a> 
<div class="b"></a> 


此 时 .a 和 .pb 两 个 <div> 之 间 的 间距 是 50px， 取 大 的 那个 值 。 
如 来 是 父子 合并 : 
.father { margin-top: 20px; } 


.Son { margin-top: SOpx; } 
<div class="father"> 
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<div class="son"></div> 
</div> 





此 时 .father 元 素 等 同 于 设置 了 margin-top:50px， 取 大 的 那个 值 。 
如 果 是 日 里 合并 : 





.a { 
margin-top: 20px; 
margin-bottom: S50Opx; 
} 


<div class="a"></div> 


则 此 时 .a 元 素 的 外 部 尺寸 是 50px， 取 大 的 那个 值 。 
(2) 正 负 值 相 加 。 如 果 是 相 令 兄弟 合并 : 


.da { margin-bottom: S50O0px; } 
.b { margin-top: -20px; } 
<div class="a"></a> 


<div class="pb"></a> 


此 时 .a 和 .b 两 个 <dqiv> 之 间 的 间距 是 30px， 是 -20px+50px 的 计算 值 。 
如 果 是 父子 合并 : 


.father { margin-top: -20px; } 
.Son { margin-top: SOpx; } 
<div class="father"> 


<div class="son"></div> 
</div> 





此 时 . father 元 素 等 同 于 设置 了 margin-top:30px， 是 -20px+50px 的 计算 值 。 
如 果 是 自身 合并 : 





.a { 
margin-top: -20px; 
margin-bottom: S50Opx; 


} 


<div class="a"></div> 


则 此 时 .a 元 素 的 外 部 尺寸 是 30px， 是 -20px+50px 的 计算 值 。 
(3) 负 负 最 负 值 。 如 果 是 相 邻 兄弟 合并 : 


.da { margin-bottom: 50px; } 
.b { margin-top: -20px; } 
<div class="a"></a> 


<div class="pb"></a> 


此 时 .a 和 .b 两 个 <qiv> 之 间 的 间距 是 -50px， 取 绝对 负 值 最 大 的 值 。 
如 果 是 父子 合并 : 


.father { margin-top: -20px; } 


.Son { margin-top: 50px; } 
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<div class="father"> 
<div class="son"></div> 
</div> 


此 时 . father 元素 等 同 于 设置 了 margin-top:-50px， 取 绝对 人 负 值 最大 的 值 。 
如 果 是 目 喘 合并 : 


.a { 














margin-top: -20px; 
margin-bottom: 50px; 
} 


<div class="a"></div> 


则 此 时 .a 元 素 的 外 部 尺寸 是 -50pPx， 取 绝对 负 值 最 大 的 值 。 

4. margin 合并 的 意义 

我 之 前 曾 见 到 类 似 这 样 的 说 法 :“margin-top 合并 bug。” 这 种 说 法 是 大 有 问题 的 ， 
“margin-top 合并 ”这 种 特性 是 故意 这 么 设计 的 ， 在 实际 内 容 呈 现 的 时 候 是 有 着 重要 意义 的 ， 
根本 就 不 是 bug! 不 要 遇 到 出 乎 自己 意料 或 者 目 己 无 法 理解 的 现象 就 称 其 为 bug。 

CSS 世界 的 CSS 属性 是 为 了 更 好 地 进行 图 文 信息 展示 而 设计 的 , 博客 文章 或 者 新 闻 信 息 是 
图 文 信息 的 典型 代表 ， 基 本 上 离 不 开 下 和 面 这 些 HTML: 

<h2> 文 章 标 题 </h2> 

<p> 文 章 段 落 1.. .</p> 

<P> 文 章 段落 2...</p> 

RE 1</1i> 

<1i> 列 表 2</1i> 
<1i> 列 表 3</1i> 

</ul> 
而 这 里 的 <n2>、<p>、<ulL> 默 认 全 部 都 是 有 垂直 方向 的 margin 值 的 , 而 且 单 位 全 部 都 是 em。 
首先 解释 一 下 为 何 需要 margin 值 。 其 实 原 因 很 徐 单 ,CSS 世界 的 设计 本 意 就 是 图 文 信 息 展 示 ， 
有 了 默认 的 margin 值 ， 我 们 的 文章 、 新 闻 就 不 会 挤 在 一 起 ， 牌 直方 向 就 会 层次 分 明 、 段 落 有 
致 ， 阅 读 体 验 就 会 好 ! 为 何 使 用 em 作为 单位 也 很 好 理解 ， 大 家 应 该 知道 浏览 器 默认 的 字号 大 
小 是 可 以 目 定 义 的 吧 ， 例如， 默认 的 是 16 像 和 水， 假如 我 们 设置 成 更 大 号 的 字号 ， 同 时 HTML 
标签 的 margin 是 像素 大 小 ， 则 会 发 生 文字 变 大 但 是 间距 不 变 的 情况 ， 原 本 段落 有 致 的 阅读 体 
验 必 然 又 会 变 得 令 人 宇 恩 。em 作为 相对 单位 ， 则 可 以 让 我 们 的 文章 或 新 闻 无 论 多 大 的 字体 都 排 
版 良好 。 可 以 看 到 ，HTML 标签 默认 内 置 的 CSS 属性 值 完全 就 是 为 了 更 好 地 进行 图 文 信息 展示 
而 设计 的 。 

我 们 平时 进行 网 站 开发 的 时 候 都 会 重 置 各 种 默认 的 margin 尺寸 , 这 是 件 需 要 好 好 审视 的 
事情 ， 对 于 绝 大 多 数 网 站 ， 确 实 需 要 做 这 样 的 处 理 ， 因 为 这 些 网 站 鲜 有 传统 的 图 文 信息 展示 区 
域 。 但 是 ,如果 你 的 站 点 是 博客 、 新 闻 门 户 或 公众 号 文章 ,我 们 应 该 做 的 是 统一 标签 的 margin 
大 小 ， 而 不 是 一 股 脑 地 重 置 成 0。 
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下 面 说 说 margin 合并 的 意义 。 对 于 兄弟 元 北 的 margin 合并 其 作用 和 em 类 似 ， 都 是 让 
图 文 信息 的 排版 更 加 舒服 自然 。 假 如 说 没有 margin 合并 这 种 说 法 ， 那 么 连续 段落 或 列表 之 类 
首尾 项 间距 会 和 其 他 兄弟 标签 成 1:2 关系 ; 文章 标题 距离 顶部 会 很 近 ， 而 和 下 面 的 文章 详情 内 
容 距离 又 会 很 开 ， 就 会 造成 内 容 上 下 间距 不 一 致 的 情况 。 这 些 都 是 糟 料 的 排版 体验 。 而 合并 机 
制 可 以 保证 元 素 上 下 间距 一 致 ,无 论 是 <h2> 标 题 这 种 margin 俩 大 的 元 素 , 还 是 中 规 中 窍 的 <p> 
元 素 ， 因 为 “ 正 正 取 大 值 ”。 

父子 margin 合并 的 意义 在 于 : 在 页 面 中 任何 地 方 租 套 或 直接 放 入 任何 裸 <div>， 都 不 会 
影响 原来 的 块 状 布局 。<div> 是 网 页 布局 中 非常 沼 用 的 一 个 元 素 ， 其 语义 是 没有 语义 ， 也 就 是 
不 代表 任何 特定 类 型 的 内 容 ， 是 一 个 通用 型 的 具有 流体 特性 的 容器 ， 可 以 用 来 分 组 或 分 隔 。 由 
于 其 作用 惑 是 分 组 的 ， 因 此 ， 从 行为 表现 上 来 看 ， 一 个 纯粹 的 <aiv> 元 又 是 不 能 够 也 不 可 以 影 
啊 原 先 的 布局 的 。 现 在 有 如 下 一 段 HTML: 


<div style="margin-top:20px;"></div> 


请 问 : 现在 要 在 上 面 这 段 HTML 的 外 面 再 肉 套 一 层 <div> 元 素 ， 假 如 说 现在 没有 父子 margin 
合并 ， 那 这 层 新 髓 套 的 <div> 电 不 阻 断 了 原本 的 兄 第 margin 合并 ? 很 有 可 能 间距 束 会 变 大 ， 
受 妥 地 影响 了 原来 的 布局 ， 这 显然 就 违背 了 <qdiv> 的 设计 作用 了 。 所 以 才 有 了 父子 margin 合 
并 , 外面 再 儒 套 一 层 <dqiv> 元 素 就 跟 设 众 套 一 样 ， 表 现 为 margin-top:20pPx 器 好 像 是 设置 在 
好 外面 的 <div> 元 系 上 一 样 。 

自身 margin 合并 的 音义 在 于 可 以 避免 不 小 心 遗 落 或 者 生成 的 空 标签 影响 排版 和 布局 。 
例如 : 

<p> 第 一 行 </p> 

<p></p> 

<p></p> 

<p></p> 


<p></p> 

<p> 第 二 行 </p> 
其 和 下 面 这 段 HTML 最 终 视觉 效果 是 一 模 一 样 的 : 

x6> 第 一 行 二 / 方 > 

<p> 第 二 行 </p> 

若是 没有 自身 margin 合并 特性 的 话 , 怕 是 上 面 的 HTML 第 一 行 和 第 二 行 之 间 要 隔 了 很 多 
行 吧 。 

知道 了 margin 合并 的 意义 以 及 作用 ， 而 且 合 并 规则 的 兼容 性 民 好 ， 所 以 ， 我 目 己 平时 网 
页 制作 的 时 候 ， 遇 到 列表 或 者 模块 ， 全 部 都 是 保留 上 下 margin 设置 。 例 如 : 


.list { 
margin-top: 1l15px; 










































































margin-bottom: 1l15px; 


} 
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而 人 不 是 战 战 奖 殊 地 使 用 : 


.list { 
margin-top: 1l15px; 
} 


因为 margin 合并 特性 ， 所 以 我 们 无 须 担 心 列表 之 间 的 间距 会 很 大 。 不 会 的 ， 就 是 15px! 
相反 ， 这 种 设置 让 我 们 的 页 和 面 结构 容错 性 更 强 了 ， 比 方 说 最 后 一 个 元 系 移 除 或 位 置 调换 ， 均 不 
会 破坏 原来 的 布局 ， 也 束 古 我 们 的 CSS 无 须 做 任何 调整 。 


4.3.4 ”深入 理解 CSS 中 的 margin:auto 


下 面 讲 讲 margin:auto 的 作用 机 制 。 首 先 ， 我 们 需要 知道 下 面 这 些 事实 。 
(1) 有 时 候 元 素 就 算 没 有 设置 width 或 height， 也 会 自动 填充 。 例 如 : 
<div></div> 
此 <qdiv> 宽 度 束 会 自动 填 满 容器 。 
(2) 有 时 候 元 素 就 算 没 有 设置 width 或 height， 也 会 自动 填充 对 应 的 方位 。 例 如 ; 
div { 
position: absolute; 
left: 0; right: 0; 
} 
此 时 <qiv> 宽 度 就 会 自动 填 满 包含 块 容器 。 
此 时 ， 如 果 设 置 width 或 neight， 自 动 填充 特性 就 会 被 覆盖 。 例 如 : 


div { width: 200px; } 


此 时 ，<qdiv> 和 宽度 被 限制 成 了 200px， 无 法 自动 填充 外 部 容器 的 可 用 宽度 了 。 

假设 外 部 的 容器 宽度 是 300px, 则 有 100px 的 宽度 原本 应 该 目 动 填 满 的 ,现在 因为 width 
设置 而 闲置 ， 而 margin:auto 就 是 为 了 填充 这 个 闲置 的 尺寸 而 设计 的 ! 

margin:auto 的 填充 规则 如 下 。 

(1) 如果 一 侧 定 值 ， 一 侧 auto， 则 auto 为 剩余 空间 大 小 。 

(2) 如 果 两 侧 均 是 auto， 则 平分 剩余 空间 。 

上 面 这 两 条 规则 中 第 二 条 可 能 大 家 都 知道 ， 但 是 第 一 条 怕 是 知道 的 人 就 不 多 了 。 我 们 来 看 
一 个 例子 : 

.father { 

width: 300px; 
} 
.Son { 


width: 200px; 
margin-right: 80px; 





























margin-left: auto; 
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请 问 : 此 时 .son 的 左右 边 距 计算 值 是 多 少 ? 

如 果 是 对 margin:auto 没有 一 定 深 入 了 解 的 人 ， 可 能 会 认为 左边 距 0、 右 边 距 100px, 
实际 上 不 是 的 ， 应 该 是 左边 距 20PX、 右边 距 80px。 margin 的 "auto' 可 不 是 摆设 ， 是 具有 
强烈 的 计算 意味 的 关键 字 ， 用 来 计算 元 素 对 应 方 回 应 该 获得 的 剩余 间距 大 小 。 璧 如 这 里 ， 总 熏 
余 间 距 大 小 是 100 px, 其 中 margin-right 使 用 了 80 px, 那 目 然 margin-letft 的 "auto' 
计算 值 承 是 剩余 的 20px 了 。 回 ] eH 回 | 

眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/3-4.php 或 者 扫 石 侧 的 二 村 2 下 于 
维 码 。 效 果 如 图 4-56 所 示 。 

由 于 CSS 世界 中 margin 的 初始 值 大 小 是 0， 因 此 ， 上 面 的 例子 如 果 
margin-right 缺失 , 实现 的 效果 正好 是 块 级 元 取 的 右 对 齐 效果 。 也 就 是 : 

.son { 

width: 200px; 


margin-left: auto; 


} 


效果 如 图 4-57 所 示 。 

















图 4-56 margin 单 侧 值 为 auto 表现 示意 4-57 margin-left:auto 实现 的 右 对 齐 效果 


所 以 , 如 果 想 让 某 个 块 状元 了 素 右 对 齐 , 脑子 里 不 要 就 一 个 float :right, 很 多 时 候 , margin- 
left:auto 才 是 最 佳 的 实践 ， 浮 动 毕竟 是 个 “小 麻风 ”。 我 甚至 可 以 这 么 说 : margin 属性 的 
auto 计算 瓯 是 为 块 级 元 系 左 中 右 对 章 而 设计 的 ， 和 内 联 元 聚 使 用 text-align 控制 左 中 右 对 
齐 正 好 遥相呼应 ! 

居中 对 齐 左右 同时 auto 计算 即 可 ，CSS 如 下 : 

.son { 


width: 200px; 


margin-right: auto; 











margin-left: auto; 


} 
此 时 , 左右 边 距 都 是 50px, 因为 对 立方 向 都 是 auto 的 时 候 剩余 间距 等 分 , 所 以 左右 间距 一 样 ， 
形成 居中 效果 。 

虽然 知道 了 margin:auto 的 计算 规则 ， 但 有 人 还 是 会 有 一 些 疑 问 ， 比 方 说 : 为 什么 明明 
容 絮 定 高 、 元 素 定 高 ，margin:auto 却 无 法 垂直 居中 ? 











.father { 
height: 200px; 


.Son { 
height: 1l100px; 
margin: auto; 


} 


原因 在 于 触发 margin:auto 计算 有 一 个 前 提 条 件 ， 就 是 width 或 height 为 auto 时 ， 
元 素 是 具有 对 应 方 同 的 自动 填充 特性 的 。 比 方 说 这 里 ， 假 如 说 把 . son 元素 的 height :100px 去 
控 ，. son 的 高 度 会 自动 和 父 元 素 等 高 变 成 200px 吗 ? 显然 不 会 ! 因此 无 法 触发 margin:auto 
计算 ， 故 而 无 法 垂直 居中 。 

可 能 有 人 又 会 间 了 : 我 们 垂直 方 同 margin 无 法 实现 居中 了 吗 ? 当然 是 可 以 的 ， 而 且 场 景 
还 不 止 一 种 。 

第 一 种 方法 是 使 用 writing-mode 改变 文档 流 的 方 问 : 


.father { 
height: 200px; 























writing-mode: vertical-lr; 
} 
.Son { 

height: 100px; 

margin: auto; 


} 
此 时 . son 束 是 牌 直 大 中 对 齐 的 ， 但 是 这 也 市 来 男 外 的 问题 ， 束 是 水 平方 同 无 法 auto 居中 了 了 。 
所 以 ， 有 人 会 关心 有 没有 让 水 平 垂直 同时 居中 的 方法 。 有 ， 了 是 这 里 要 提 的 第 二 种 方法 ， 
绝对 定位 元 系 的 margin:auto 居中 。 下 面 我 们 边 解释 为 何 大 中 边 展示 效果 。 前 先 , 下 面 的 CSS 
代码 : 
Eee .Tf 
width: 300px; height:150px; 


position: relative; 


} 


.Son { 




















position: absolute; 
top: 0; right: 0O0; bottom: 0; left: 0; 
} 


此 时 .son 这 个 元 素 的 尺寸 表现 为 “格式 化 宽度 和 格式 化 高 度 ”， 和 <div> 的 “正常 流 宽度 ”一 
样 ， 同 属于 外 部 尺寸 ， 也 就 是 尺寸 自动 填充 父 级 元 素 的 可 用 尺寸 ， 此 时 我 们 给 .son 设置 尺寸 。 
例如 : 


.Son { 




















position: absolute; 
top: 0; right: 0O0; bottom: 0; left: 0; 
width: 200px; height: 1l100px; 
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此 时 宽 高 被 限制 ， 原 本 应 该 填充 的 空间 残 被 空余 了 出 来 ， 这 多 余 的 空间 束 是 margin:auto 
计算 的 空间 ， 因 些 ， 如 果 这 时 候 我 们 再 设置 一 个 margin:auto: 
.Son { 
position: absolute; 
top: 0; right: 0O0; bottom: 0; left: 0; 
width: 200px; height: 1l100px; 
margin: auto; 


} 


那么 我 们 这 个 .son 元 系 就 水 平方 回 和 垂直 方 同 同时 居中 了 ,因为 auto 正好 把 上 下 左右 剩余 至 
间 全 部 等 分 了 了， 目 然 就 后 中 ! 

眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/3-5.php 或 者 扫 下 面 的 二 维 码 。 效 果 如 图 4-58 
所 示 。 














4-58 ”绝对 定位 元 素 下 的 margin:auto 居中 对 齐 效 果 


由 于 绝对 定位 元 素 的 格式 化 高 度 即 使 父 元 素 height :auto 也 是 支持 的 ， 因 此 ， 其 应 用 场 
景 可 以 相当 广泛 ， 可 能 唯一 的 不 足 丈 是 此 后 中 计算 IE8 及 以 上 版 本 浏览 右 才 文 持 。 至 少 对 我 来 
讲 ， 如 果 项 目 无 须 兼 容 IE7 浏览 器 ， 绝 对 定位 下 的 margin:auto 居中 是 我 用 得 最 频繁 的 块 级 
元 素 垂 直 居 中 对 齐 方式 ， 比 top: 50%$ 然 后 margin 负 一 半 元 素 高 度 的 方法 要 好 使 得 多 。 

最 后 , 还 有 一 个 大 家 可 能 关心 的 问题 , 假如 说 这 里 面 的 元 系 尺 寸 比 外 面 的 大 ， 那 这 个 auto 
该 怎么 计算 呢 ? 

很 简单 ， 如 果 里 面 元 素 尺 寸 大 ， 说 明和 猎人 余 可 用 空间 都 没有 了 ， 会 被 当 作 0 来 处 理 ， 也 就 是 
auto 会 被 计算 成 0， 其 实 就 等 于 没有 设置 margin 属性 值 ， 因 为 margin 的 初始 值 束 是 0 。 

另外 ， 对 于 和 登 换 元 素 ， 如 果 我 们 设置 display:block， 则 margin:auto 的 计算 规则 同 
样 适合 。 


4.3.5 ”margin 无 效 情 形 解 析 


因为 margin 属性 的 诸多 特异 性 ， 所 以 ， 我 们 在 实际 开发 的 时 候 ， 经 常会 过 到 设置 的 
margin 无 效 的 情形 ， 这 里 我 罗列 一 下 , 希望 大 家 过 到 类 似 的 问题 知道 原因 以 及 如 何 对 症 下 药 。 

(1) display 计算 值 jnline 的 非 蔡 换 元 素 的 垂直 margin 是 无 效 鸭 ， 虽 然 规范 提 到 有 
泻 染 ， 但 浏览 器 表现 却 未 寻 得 一 点 踪迹 ， 这 和 padding 是 有 明显 区 别 的 。 对 于 内 联 蔡 换 元 素 ， 
于 直 margin 有 效 ， 并 且 没 有 margin 合并 的 问题 ， 所 以 图 片 永远 不 会 发 生 margin 合并 。 

(2) 表格 中 的 <tr> 和 <td> 元 素 或 者 设置 display 计算 值 是 table-cell 或 table-row 的 
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元 系 的 margin 都 是 无 效 的 。 但 是 ， 如 果 计 算 值 是 table-caption、table 或 者 inLine-table 
则 没有 此 问题 , 可 以 通过 margin 控制 外 间距 , 甚至 : :first-letter 伪 元 素 也 可 以 解析 mardin。 
(3) margin 合并 的 时 候 , 更 改 margin 值 可 能 是 没有 效果 的 。 以 父子 margin 重合 为 例 ， 
假设 父 元 素 设 置 有 margin-top:50px， 则 此 时 子 元 素 设 置 margqin-top:30px 束 没 有 任何 
效果 表现 ， 除 非 大 小 比 50px 大 ， 或 者 是 负 值 。 
(4) 绝对 定位 元 系 非 定位 方位 的 margin 从 “无 效 ”。 什 么 意思 呢 ? 很 多 时 候 ， 我 们 对 元 
素 进行 绝对 定位 的 时 候 ， 只 会 设置 1 一 2 个 相 邻 方位 。 例 如 : 


img { top: 10%; left: 30%;} 


此 时 right 和 bottom 值 属于 auto 状态 ,也 束 是 右 侧 和 底部 没有 进行 定位 ， 此 时 ， 这 两 个 方 
器 设置 margin 值 我 们 在 页 面 上 是 看 不 到 定位 变化 的 。 例 如 : 
img { 
top: 10%; left: 30%; 


margin-right: 30px; 
} 


此 时 margin-right :30px 儿 平 吏 是 摆设 。 是 margin 没 起 作用 吗 ? 实际 上 不 是 的 ， 绝 对 定 
位 元 素 任 意 方位 的 margin 值 无 论 在 什么 场景 下 都 一 直 有 效 。 壁 如 这 个 例子 ， 假 设 <img> 宽 度 
70%， 同 时 父 元 素 是 具有 定位 属性 ， 且 overflow 设置 为 auto 的 元 素 ， 则 此 时 就 会 出 现 水 平 
滚动 条 ， 因 为 mardin-right:30px 增 加 了 图 片 的 外 部 尺寸 。 
那 为 什么 一 般 情 况 下 没有 效 末 呢 ? 主要 是 因为 绝对 定位 元 素 的 泻 染 是 独立 的 ， 普 通 元 素 和 
见 第 元 素 是 心 连 心 ， 你 动 我 也 动 ， 但 是 绝对 定位 元 素 由 于 独立 演 染 无 法 和 兄 第 元 素 插 科 打 译 ， 
因此 ，margin 无 法 影响 兄 第 元 系 定 位 ， 所 以 看 上 去 怠 “无 效 ”。 
(5) 定 高 容器 的 子 元 素 的 margin-bottom 或 者 宽度 定 死 的 子 元 素 的 margin-right 的 
定位 “类 效 ” 
我 们 先 看 例子 : 
<div class="box"> 
<div class="child"></div> 
</div> 
.box { 
height: 1l100px; 
} 
.Child { 
height: 80px; 


margin-bottom: 1l100px; 
} 


这 里 ， margin-bottom:100px 是 不 会 在 容 右 底部 形成 100px 的 外 间距 的 , 看 上 去 就 像 是 “ 失 
效 ” 一 样 ， 同 样 的 HTML，CSS 代码 如 下 : 


.box { 
width: 1l100px; 
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} 
.Child f{ 
width: 80px; 
margin-right: 1l100px; 
} 


此 时 ， margin—right:100px 对 元 素 的 定位 也 没有 任何 影响 ， 给 人 “无 效 ” 的 感觉 ， 实 际 上 ， 
这 个 现象 的 本 质 和 上 面 绝 对 定位 元 素 非 对 立方 位 margin 值 “ 无 效 ” 类 似 。 原 因 在 于 ， 奉 想 使 
用 margin 属性 改变 自身 的 位 置 ， 必 须 是 和 当前 元 素 定位 方 同 一 样 的 margin 属性 才 可 以 ， 否 
则 ，margin 只 能 影响 后 面 的 元 了 系 或 者 父 元 系 。 

例如 , 一 个 普通 元 素 , 在 默认 流下 ,其 定位 方 同 是 左 侧 以 及 上 方 , 此 时 只 有 margin-left 
和 margin-top 可 以 影响 元 素 的 定位 。 但 是 ， 如 果 通 过 一 些 属性 改变 了 定位 方 同 ， 如 
float:right 或 者 绝对 定位 元 素 的 right 右 侧 定位 ， 则 反 过 来 margin-right 可 以 影响 元 
素 的 定位 ，margin-left 只 能 有 影响 兄 第 元 素 。 

在 本 例 中 ， 父 容器 只 有 一 个 子 元 素 ， 因 此 没有 影响 兄弟 元 素 的 说 法 ， 加 上 要 么 定 宽 要 么 定 
高 , 右 侧 和 底部 无 margin 重 登 , 因此 外 部 的 元 系 也 不 会 有 任何 布局 上 的 影响 , 因此 残 给 人 “无 
效 ” 的 错觉 ， 实 际 上 是 margin 目 里 的 特性 导致， 有 泻 染 只 是 你 看 不 到 变化 而 已 。 

(6) 著 长 筑 及 导致 的 margin 无 效 。 我 们 直接 看 下 面 这 个 例子 : 


<div class="box"> 


























<img src="mml .jpg"> 
<p> 内 容 </p> 
</div> 


.box > img { 
float: left; 
width: 256px; 
} 
.box > pi 
overflow: hidden; 
margin—left: 200px; 
} 


其 中 的 margin-left :200px 是 无 效 的 , 准确 地 讲 , 此 时 的 <p> 的 margin-left 从 负 无 穷 到 
2D6pPpx 都 是 没有 任何 效果 的 。 要 解释 这 里 为 何 会 无 效 ， 需要 对 float 和 overflow 深入 理解 ， 
而 这 两 个 属性 都 是 后 面 的 内 容 ， 因 此 ， 深 入 原因 分 析 我 们 将 在 6.4 节 介绍 。 

(7) 内 联 特性 导致 的 margin 无 效 。 我 们 直接 看 下 面 这 个 例子 : 


<div class="jbox"> 





<img src="mml .Jpg"> 
</div> 
.box > img { 
height: 96px; 
margin-top: -200px; 


这 里 的 例子 也 很 有 代表 性 。 一 个 容器 里 面 有 一 个 图 片 ， 然 后 这 张 图 片 设置 margin-top 
人 负 值 ， 让 图 片上 偏 移 。 但 是 ， 随 厦 我 们 的 负 值 越 来 越 负 ， 结 果 达 到 某 一 个 具体 负 值 的 时 候 ， 图 
片 不 再 往 上 偏 移 了 。 比 方 说 ， 本 例 margin-top 设置 的 是 -200px， 如 果 此 时 把 margin-top 
设置 成 -300px， 图 片 会 再 往 上 偏 移 100px 吗 ? 不 会 ! 它 会 微 丝 不 动 ，margin-top 变 得 无 效 
了 。 要 解释 这 里 为 何 会 无 效 ， 需 要 对 vertical-align 和 内 联合 模型 有 深入 的 理解 ， 而 这 
vertical-align 是 后 面 的 内 容 ， 因 此 ,深入 原因 分 析 我 们 将 在 5.3 节 介 绍 。 这 里 大 家 先 记 住 
有 这 么 一 个 margin 失效 的 场景 即 可 。 


4.4”， 功 勋章 越 的 border 属性 


顾名思义 ，borqder 束 是 “边框 ”， 从 名 字 就 可 以 看 出 来 CSS 设计 者 设计 此 属性 的 目的 融 
是 给 元 际 弄 个 边框 什么 的 。 但 是 ，CSS 世界 中 很 多 大 受 欢 迎 的 属性 之 所 以 受 欢 迎 ， 并 不 是 因为 
其 本 职工 作 做 得 很 好 ， 而 是 衍生 出 来 的 特性 可 以 用 来 解雇 很 多 环 手 的 问题 。borqet 属性 就 是 
典型 代表 之 一 。 我 总 是 称赞 border“ 功 勋 早 越 ” 正 是 因为 bordqezt 属性 在 图 形 构建 、 体 验 优 
化 以 及 网 页 布局 这 块 几 大 放 异 彩 ， 同 时 保证 其 恨 好 的 兼容 性 和 稳定 的 特性 表现 才 得 此 秋粮 的 ， 
如 采 束 老 老 实 实 男 个 框框 ， 就 不 可 能 称 狗 它 “功勋 里 越 ”。 

下 面 我 们 一 起 看 看 porder 都 有 哪些 精彩 的 特性 表现 。 


4.4.1 为 什么 border-width 不 支持 百分比 值 
虽然 同属 盒 模 型 基本 成 员 ， 但 是 border-width 却 不 支持 百分比 。 例 如 ， 设 置 : 


div { border-width: 50%; } 


是 无 效 的 ， 直 接 声 明 无 效 。 这 一 点 和 margin 和 padding 都 不 一 样 ， 下 面 问题 来 了 : 为 什么 
border-width 不 支持 百分比 呢 ? 

有 人 说 不 好 解析 、 不 好 表现 。 在 我 看 来 ， 是 没有 这 个 问题 的 ， 直接 和 margin 和 padding 
一 样 ， 全 部 相对 于 宽度 计算 就 好 了 ， 没 有 任何 泻 染 上 的 难度 。 之 所 以 不 支持 ， 在 我 看 来 是 语义 
和 使 用 场景 决定 的 。 

首先 看 语义 。 顾 名 思 义 ，border-widtn 是 “边框 宽度 ” 我 们 先 来 看 看 现实 世界 的 物体 
的 边框 ， 假 设 我 们 现在 有 两 台数 码 设 备 ， 分 别 是 iMac 和 iPhone, 很 显然 ， 这 两 台 设 备 的 尺寸 到 
异 很 大 ， 但 是 ， 大 家 仔细 对 比 束 会 及 现 ， 这 两 者 的 边框 大 小 产 列 跟 屏 大 设 备 相 比较 而 言 束 可 以 
忽略 不 计 了 。 看 到 没 ， 所 谓 “ 边 框 ”， 是 不 会 因为 设备 大 就 按 比 例 变 大 的 。 因 此 ， 如 果 文 持 百 分 
比值 ， 是 不 古 就 意味 着 设备 大 了 边框 也 跟着 变 大 ? 这 显然 不 合 “ 边 框 ” 的 语义 嘱 ! 然后 再 看 使 
用 场景 ， 虽 然 说 如 采 border-width 文 持 百分比 值 布局 什么 的 能 做 的 事情 束 更 多 了 了， 但 是 ， 
我 们 要 想到 CSS 世界 创造 的 背景 主要 是 为 图 文 展示 服务 的 , 有 一 张 图片 , 大 片区 域 都 是 白色 的 ， 
在 白 底 背景 上 和 文字 混在 一 起 ， 就 会 有 一 片 奇 怪 的 空白 区 域 ， 会 让 人 产生 没 对 齐 的 假象 ， 此 
时 ， 我 们 给 这 张 图 片 套 个 1px 灰色 边框 ， 区 域 就 明显 了 ， 对 吧 ! 设计 的 初衷 就 是 为 了 这 么 点 
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儿 事 ， 没 有 需要 使 用 百分比 值 的 场景 。 于 是 ， 综 合 这 两 点 ， 造 成 了 border-width 不 文 持 自 
分 比值 。 

其 实 还 有 很 多 CSS 属性 ， 如 outline、box-shadow、text-shadow 等 ， 都 是 不 文 持 
百分比 值 的， 原因 也 与 此 类 似 。 

我 们 平 第 使 用 porder-widtn 几乎 全 是 固定 的 数值 ， 如 border-width:1px 之 类 ,但 
是 ， 可 能 有 些 人 并 不 知道 porder-width 还 文 持 在 干 天 键 字 ， 包 括 thin、medium (默认 值 ) 
和 thick， 对 应 的 尺寸 大 小 具体 如 下 。 

。 thin: 洲 薄 的 ， 和 等同 于 1px。 

。 medqium(〈 默 认 值 ): 注 厚 均匀 ， 等 同 于 3px。 

s thicek:' 厚 的 窟 辣 于 45x 

不 知道 大 家 有 没有 想 过 这 么 一 个 问题 ， 为 什么 porder 属性 的 默认 宽度 大 小 是 medium， 
也 就 是 3px， 明 明 thnin (lpx) 宽度 更 常用 吧 ? 

为 什么 昵 ? 因为 .…… border-style:double 至 少 3px 才 有 效果 ! border-style... 
double? 我 好 像 只 知道 solid、dashed 和 dotted， 这 double 是 个 什么 ? 

下 面 我 们 一 起 看 看 border-style 的 一 些 有 趣 的 故事 。 


4.4.2 了 解 各 种 border-style 类 型 


1. border-style:none 
注意 ， border-style 的 默认 值 是 none， 有 一 部 分 人 可 能 会 误 以 为 是 solid。 这 也 是 单 
纯 设 置 bporder-width 或 border-color 没有 边框 显示 的 原因 ， 如 下 示意 : 


























div { border: 10px; } /* 无 边框 出 现 */ 

div { border: red; } /* 无 边框 出 现 */ 

如 果 是 porder-style 类 型 值 则 边框 出 现 。 例 如 ， 下 面 CSS 会 出 现 3 像素 宽 的 边框 : 
div { border: solid; } /* 有 边框 出 现 */ 


平时 我 们 使 用 porder-style:none 多 出 现在 重 置 边 框 样式 的 时 候 ， 例 如 ， 实 现 一 个 没 
有 下 边框 的 边框 效果 : 


div { 
border: lpx solid; 
border-bottom: none; 


} 
当然 ， 我 们 也 可 以 通过 和 直接 设置 边框 党 度 为 0 进行 重 置 : 


div { 
border: lpx solid; 
border-bottom: 0); 
} 


当然 ， 如 条 你 是 一 个 “性 能 控 ”， 可 以 两 个 一 起 号 ， 根 据 前 替 的 测试 ， 这 样 写 泻 染 性 能 最 高 : 





div { 
border: lpx solid; 
border-bottom: 0 none; 


} 


2. border-style:solid 

这 个 大 家 和 耳熟能详， 妇 疆 省 知 ， 实 线 边框 ， 没 什么 好 说 的 。 

3. border-style:dashed 

虚线 边框 可 以 说 是 使 用 频率 第 二 高 的 边框 类 型 了 ， 人 至 于 使 用 没什么 好 说 的 ， 倒 是 这 边框 本 
身 的 一 些 泻 染 数据 插 有 意思 。 这 虚线 颜色 区 的 宽 高 比 以 及 颜色 区 和 透明 区 的 宽度 比例 在 不 同济 
览 器 下 是 有 差异 的 。 例 如 ， 在 Chrome 和 Firefox 浏览 器 下 ， 颜 色 区 的 宽 高 比 是 3:1， 关 色 区 和 
透明 区 的 宽度 比例 是 1:1, 如 图 4-59 所 示 ; 而 正 浏 览 器 则 是 另外 的 数据 , 颜色 区 的 宽 高 比 是 2:1， 
颜色 区 和 透明 区 的 宽度 比例 也 是 2:1， 如 图 4-60 所 示 。 














ee ee 
1:1 ppl | 


图 4-59 ” Chrome 浏览 器 下 虚线 边框 一 些 比 例 数 据 图 4-60 正 浏 览 器 下 虚线 边框 一 些 比例 数据 


本 喘 了 驶 是 方 方 正 正 的 ， 再 加 上 兼容 性 的 差异 ， 基 本 上 残 只 能 当 作 虚 框 来 用 了 。 

4. border-style:dotted 

虚 点 边框 在 表现 上 同样 有 兼容 性 差异 ， 昌 然 规范 上 明确 表示 是 个 圆 点 ， 但 是 Chrome 以 及 
Firefox 浏览 器 下 虚 点 实际 上 是 个 小 方 点 , 如 图 4-61 所 示 ; 而 IE 浏览 器 下 则 是 小 圆 点 , 如 图 4-62 














所 示 。 
» border-style: dotted; : 。 border-style: dotted; 。 


图 4-61 Chrome 浏览 器 下 点 线 边 框 样式 图 4-62 下 浏览 器 下 点 线 边 框 样式 

同样 一 样 事物 ， 在 有 些 人 眼中 是 一 扫 而 过 ， 但 在 有 些 人 眼中 却 是 如 获 至 宝 。 不 知 大 家 对 上 
面 的 虚 点 边框 表现 都 怎么 看 呢 ? 有 没有 什么 地 方 让 你 怪 然 心动 的 呢 ? 

反正 ,我 是 眼前 一 腕 了 ， 腕 在 什么 地 方 呢 ? 就 是 正 浏览 右 下 的 虚 点 是 个 圆 ! 对 ， 圆 ， 难 道 
还 意识 不 到 吗 ? 众所周知 ，CSS 圆 角 属性 porder-radius 从 IE9 浏览 器 才 开 始 支 持 ，IE8 这 
些 浏览 器 要 想 实 现 圆 角 ， 要 么 用 图 片 要 人 么 使 用 复杂 生 深 的 VML， 但 是 ，dotted 类 型 边框 天 然 
束 是 一 个 圆 ， 那 我 们 要 想 在 IE8 浏览 句 下 实现 圆 角 效果 ， 是 不 是 就 轻松 多 了 呢 ? 

例如 ， 下 面 的 CSS: 


.dotted { 
width: 150px; height: 150px; 
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border: 149px dotted #cd0000; 
} 


则 此 时 的 表现 如 图 4-63 所 示 。 此 时 的 样式 表现 就 是 4 个 规整 的 圆 点 ， 此 时 ， 我 们 只 需要 配合 
overflow:hidqdqen， 让 其 中 3 个 点 隐藏 ， 则 圆 角 效果 束 实 现 了 ， 如 图 4-64 所 示 。 


149px dotted 








图 4-63 下 浏览 器 4 个 虚 点 图 4-64 隐藏 3 个 圆 点 即 可 实现 圆 角 效果 
使 用 CSS 代码 表示 束 是 : 


.box { 
width: 1l150px; height: 150px; 
/* 超出 区 域 隐藏 ， 只 显示 一 个 圆 */ 
overflow: hidden; 

} 

.dottedqd { 
width: 100%; height: 100%; 
border: 149px dotted #cd0000; 

} 


但 是 ， 上 和 面 的 方法 只 能 实现 正 圆 贺 角 ， 如 果 想 实现 任意 大 小 的 圆 角 该 怎么 办 ? 

其 实 也 不 难 ， 我 们 不 是 有 4 个 圆 点 吗 ， 正 好 可 以 作为 
加 角 的 4 个 角 ， 再 窗 盖 2 层 窍 形 实 色 《〈 如 图 4-65 黑 线 线 杠 
部 分 区 域 所 示 )， 束 实现 了 小 圆 角 效果 了 。 

5. border-style:double 

双 线 边框 ,顾名思义 ， 即 两 根 线 日 为 实 线 。 虽 然 平 弟 我 
们 使 用 少 , 但 是 其 碰 容 性 非 第 好 。 视 党 表 现 为 线 框 一 一 透明 
线 框 , 根据 porder-width 大 小 不 同 , 其 表现 规则 如 表 4-2 
所 示 。 























图 4-65 ”任意 大 小 圆 角 实现 示意 


2px 


4PX 


表 4-2 border-style:double 表现 规则 


本 


从 表 4-2 可 以 看 到 ， 当 边框 宽度 是 1px 和 2px 的 时 候 , 其 表现 和 jbporder-style:solid 


效果 预览 





是 一 模 一 样 的 ; 当 边 框 为 3px 的 时 候 ， 才 开始 有 双 线 边框 的 表现 ， 包 括 retina 屏幕 也 是 如 此 ， 


因为 边框 宽度 是 没有 半 像 素 的 概念 的 。 还 记 不 记得 上 一 节 留 下 的 问题 ,“ 为 什么 porder-width 





的 默认 值 是 media (3px) ? ”答案 就 在 这 里 ， 虽 然 说 实际 开发 的 时 候 1px 大 小 的 soliq 类 


型 边框 是 最 常用 的 ， 但 是 却 无 法 让 double 类 型 边框 有 合乎 语义 的 表现 ， 因 此 使 用 了 能 表现 





double 类 型 的 最 小 边框 宽度 3px 作为 边框 宽度 默认 值 。 
根据 表 4-2， 我 们 还 可 以 用 一 句 话 总 结 出 porder-style:double 的 表现 规则 : 双 线 宽 





度 永 远 相等 ， 中 间 间 隅 十 1 。 





于 是 , 我 们 就 可 以 借助 porder-style:double 实现 


一 些 等 宽 的 图 形 效 果 。 例 如 ， 等 比例 “三 道 杜 ”图 标 效 果 如 
图 4-66 所 示 。 


CSS 代码 如 下 : 


.lcon-menu { 
width: 120px; 
height: 20px; 
border-top: 60px double; 
border-bottom: 20px solid; 
} 


6. 其 他 border-style 类 型 


inset 〈 内 上 四)、outset 〈 外 凸 )、groove “〈 沟 槽 )、ridge 
( 山 疹 ) 风格 老 土 过 时 ， 晶 兼容 性 惨不忍睹 ( 见 图 4-67)。 因 此 ， 它 
们 没有 任何 实用 价值 。 但 是 ， 它 们 也 不 是 一 无 是 处 ， 这 几 个 边框 
类 型 的 出 现 无 形 中 规范 了 实 线 边框 的 转角 连接 规则 。 规 范 中 并 没 
有 任何 关于 边框 连接 规则 的 描述 ,按照 一 般 的 套路 ,， 浏 
现 不 一 ， 类 似 虚 线 之 类 边框 确实 如 此 ， 但 是 ， 对 于 solLid 类 型 
边框 ， 各 个 浏览 器 却 像 是 约定 好 了 ， 连 接 表 现 一 致 ， 背 后 起 作用 
的 恰恰 是 这 几 个 看 上 去 没有 任何 作用 的 border-style 类 型 。 

















border 图 形 生成 技术 的 广泛 应 用 打下 了 坚实 的 基础 。 
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4-66 “三 道 杠 ”小 图 标示 意 


IE Chrome Firefox 





图 4-67 inset、outset、 


groove、ridge 各 浏 
表现 截图 
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4.4.3 border-color 和 color 


border-color 有 一 个 很 重要 也 很 实用 的 特性 ， 就 是 “border-color 默认 磊 色 就 是 
color 色 值 ”。 具 体 来 讲 ， 就 是 当 没 有 指定 porder-color 颜色 值 的 时 候 ， 会 使 用 当前 元 素 的 
color 计算 值 作为 边框 色 。 例 如 ， 下 面 这 个 例子 : 

.box 1 

border: 10px solid; 


COolor: red; 


} 
此 时 ，. box 元 素 的 10px 边框 颜色 就 是 红色 。 

具有 类 似 特性 的 CSS 属性 还 有 outline、box-shadow 和 text-shadow 等 。 

那 这 种 特性 对 于 实际 开发 有 没有 什么 作用 呢 ? 我 们 直接 
看 一 个 例子 , 我 们 在 上 传 图 片 的 时 候 ， 往往 后 面 会 跟着 一 个 融 
有 加 号 的 框框 按钮 ， 表 示 可 以 继续 传 图 ， 如 图 4-68 所 示 ， 然 
后 hover 的 时 候 会 变 个 色 。 

这 种 方 方 正 正 、 简 简单 单 的 图 形 最 适合 使 用 三 三 两 两 的 
CSS 代码 绘制 7 了。 通常 ， 正 常 思维 下 ， 我 们 都 是 使 用 
width/heignt 外 加 一 个 background-color 绘制 加 号 的 ， 核 心 CSS 代码 如 下 : 











4-68 ”和 吊 加 号 的 上 传 按钮 


.add { 
border: 2px dashed #ccc; 

} 

.add:before, .add:after { 
background: #ccc; 

} 

/* hover 变色 */ 

.add:hover { 
border-color: #06C; 

} 

.add:hover:before, .add:hover:after { 
background: #06C; 

} 


功能 没有 任何 问题 ， 唯 独 当 我 们 nover 变色 的 时 候 ， 需 要 同时 重 置 3 处 (元 素 本身 以 及 
两 个 伪 元 素 ) 颜色 。 实 际 上 ， 如 果 这 里 不 是 使 用 packground-color， 而 是 使 用 porder 来 
绘制 加 号 ， 则 代码 要 简单 得 多 ， 如 下 : 


.add { 
Color: #ccc; 











border: 2px dashed; 
} 
.add:before { 

border-top: lO0px solid; 
} 


.add:after { 
border-left: lO0px solid; 
| 
/* hover 变色 */ 
.add:hover { 
color: #06C; 
} 


可 以 看 到 ， 使 用 border 实现 ， 我 们 hover 变色 的 时 候 ， 只 需要 重 置 1 处 ， 也 就 是 重 置 
元 素 本 映 的 color 了 束 可 以 了 。 因 为 整个 图 形 都 是 使 用 
border 绘制 的 ， 同 时 颜色 缺 省 ， 所 以 所 有 图 形 闫 色目 动 跟 
Ts 

效果 演示 地 址 是 http://demo.cssworld.cn/4/4-1.php。 
hover 效果 如 图 4-69 所 示 。 图 4-69 ”加 号 按钮 鼠标 经 过 效果 


4.4.4 ”border 与 透明 边框 技巧 


虽然 color:transparent 在 IE9 以 上 版 本 的 浏览 右 才 文 持 ， 但 是 porder-color: 
ee 浏览 需 融 开始 文 持 了 ， 于 是 ,我 们 解决 一 些 杯 手 问题 的 思路 就 更 加 开阔 了 。 

. 右 下 方 background 定位 的 技巧 

新 世界 还 没 到 来 的 时 候 ，background 定位 有 一 个 比较 大 的 局 限 性 ， 束 是 只 能 相 
对 左上 角 数 值 定位 ， 不 能 相对 右 下 角 。 这 种 特性 有 时 候 会 给 我 们 的 工作 融 来 一 点 儿 厂 烦 。 举 个 
例子 , 假设 现在 有 一 个 宽度 不 固定 的 元 素 , 我 们 需要 在 距离 右边 缘 50 像素 的 位 置 设 置 一 个 背景 
图 三， 此 时 background 属性 就 草 过 明志 从 了 : 由 于 宽度 不 固定 ， 所 以 无 法 通过 tt 改定 具体 数值 来 
实现 我 们 想 要 的 效果 ， 因 为 background 是 相对 左上 角 定 位 的 ， 我 们 的 需求 是 右 侧 定 位 。 

要 实现 上 面 的 需求 ， 方 法 挺 多 。 其 中 一 种 方法 吕 是 使 用 透明 边框 ， 如 下 CSS 代码 : 


.box { 
border-right: 50px solid transparent;} 









































background-position: 100% 50%; 
} 


此 时 ， 对 50px 的 间距 我 们 使 用 transparent 边框 表示 ， 这 样 就 可 以 使 用 百分比 packgroungd- 
position 定位 到 我 们 想 要 的 位 置 了 。 因 为 , 默认 background 背景 图 片 是 相对 于 padding box 
定位 的 , 也 就 是 说 ， background-position:100% % 的 位 置 计 算 默 认 是 不 会 把 border-width 
计算 在 内 的 。 

和 优雅 地 增加 点 击 区 域 大 小 

这 是 提高 用 户 体验 的 一 个 小 技巧 ， 尤 其 在 移动 端 ， 我 们 的 操作 工具 一 般 承 是 我 们 的 手指 ， 

但 是 ， 我 们 的 手指 粗细 可 以 媲美 衣 划 卜 ， 而 屏幕 斥 寸 就 那么 点 儿 ， 我 是 初始 什 
如 条 我 们 正在 走路 ， 则 一 些 精致 的 网 标 和 按钮 很 容易 就 点 不 中 甚至 
误 点 。 举 个 例子 ， 在 移动 端 搜索 输入 框 输入 内 容 后 ， 右 侧 会 有 一 个 
清除 按钮 ， 类 似 于 图 4-70 所 示 。 








图 4-70 ”搜索 框 清 除 按钮 
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无 论 我 们 是 使 用 CSS 图 标 合并 工具 还 是 手写 模拟 ， 基 本 上 都 是 按照 图 标的 原始 尺寸 写 的 ， 
关 似 下 面 : 


.licon—clear { 
width: 16px; 
height: 16px; 





} 

效果 里 然 没 问 题 ， 但 是 体验 不 一 定好 ， 因 为 尺寸 仅仅 16 像 系 ， 我 们 妆 克 让 般 的 手指 很 容 
易 扣 不 中 ， 甚 至 点 到 后 面 的 输入 框 上 ， 那 束 尴 雁 了 。 

稳妥 的 方法 是 外 部 再 秽 和 套 一 层 标签 ， 专 门 控 制 点 击 区 域 大 小 。 如 采 对 代码 要 求 较 高 ， 则 可 
以 使 用 padding 或 者 透明 border 增加 元 素 的 点 击 区 域 大 小 。 

其 中 ， 首 推 透 明 border 方法 ， 原 因 很 简单 ， 假 设 我 们 的 图 标 是 使 用 工具 生成 的 ， 那 么 
background-position 束 古 限定 死 的 值 ， 硅 再 使 用 padding 撑 开 间距 ， 就 会 过 到 定位 不 准 
的 问题 。 但 是 ， 乔 是 使 用 透明 porqder 增加 点 击 区 域 ， 则 无 此 问题 ， 只 要 合并 时 留 下 足够 的 间 
距 束 可 以 了 。 

.icon-clear 1{ 


width: 16px; 
height: 16px; 











border: llpx solid transparent,; 


| 
此 时 ， 扣 击 区 域 大 小 从 16x16 一 下 子 提升 到 38x38， 普 然 更 容易 被 点 中 了 了 。 

在 现代 浏览 右 下 手动 输入 http://demo.cssworld.cn/4/4-2.php 或 者 扫 下 面 的 二 维 码 。 现在 的 点 
击 区 域 如 图 4-71 所 示 。 


回避 

















我 是 初始 值 Ee 





图 4-71 清除 按钮 点 击 区 域 优雅 增加 

3. 三 角 等 图 形 绘制 

即使 在 移动 问 , 使 用 CSS 的 border 属性 绘制 三 角形 等 图 形 仍 是 性 价 比 最 高 的 方式 。 例 如 ， 
一 个 明 下 的 等 腰 直 角 三 角形 ， 直 接 用 : 








div { 
width: 0; 
border: 10Px solid; 
border-color: #f30 transparent transparent,; _ 


} 
则 有 图 4-72 所 示 的 效果 。 图 4-72 朝 下 的 三 角 效 果 


4.4.5 border 与 图 形 构建 


border 属性 可 以 轻松 实现 兼容 性 非常 好 的 三 角 图 形 效 果 ， 为 什么 可 以 呢 ? 其 底层 原因 受 
inset/outset 等 看 上 去 没有 实用 价值 的 border-style 属性 影响 ， 边 框 3D 效果 在 互联 网 早 
期 其 实 还 是 挺 潮 的， 那个 时 候 人 们 喜欢 有 质感 的 东西 ， 为 了 呈现 通 真 的 3D 效 末 ， 目 然 在 边框 转 
角 的 地 方 一 定 要 等 分 平滑 处 理 , 然后 不 同 的 方 回 赋予 不 同 的 颜色 ,然后 , 这 一 转角 规则 也 被 solid 
类 型 的 边框 给 沿用 了。 因此， 我 们 束 不 难 理解 下 和 面 的 4 色 边 框 的 表现 了 : 

div { 

width: lO0px; height: lO0px; 
border: lO0px solid; 


border-color: #f£30 #00f #396 #0f0; 
} 























效果 如 图 4-73 所 示 。 
此 时 ， 如 果 设 置 左 右 下 3 个 方向 边框 色 为 透明 ， 是 不 是 就 是 一 个 梯形 了 ? 
div { 


width: 1LI0Px height: 1l10px; 
border: 1l0px solid; 
border-color: #f30 transparent transparent,; 


} 
效果 如 图 4-74 所 示 。 
器 三 
图 4-73” 实 色 边 框 的 转角 连接 表现 图 4-74 ”三 个 方向 边框 透明 下 的 梯形 效果 
此 时 ， 再 进一步 ， 宽 度 从 10px 变 成 0， 是 不 是 上 面 梯形 下 方 的 开口 也 加 从 10px 变 成 0 
了 ? 是 不 是 三 角形 效果 就 出 现 了 ? 
div { 


width: 0; 
border: lO0px solid; 














border-color: #f30 transparent transparent,; 


} 








效果 如 图 4-75 所 示 。 _ 
当然 ， 我 们 还 可 以 让 垂直 方 同 的 边框 宽度 更 宽 一 点 ， 这 样 三 角 
图 4-75 参 下 的 三 角 效 果 
形 束 会 更 加 狭长 : 人 
div { 
width: 0; 


border-width: 1l0px 20px; 
border-style: solid; 
border-color: #f30 transparent transparent,; 


4.4 功勋 早 越 的 border 属性 109 


效果 如 图 4-76 所 示 。 
又 或 者 是 仅仅 让 两 个 方 同 的 边框 透明 : 
div { 
width: 0; 
border-width: 1l0px 20px; 
border-style: solid; 


border-color: #f£f30 #f30 transparent transparent; 


} 
效果 如 图 4-77 所 示 。 这 种 三 角形 可 以 作为 类 似 于 如 图 4-78 所 示 对 话 框 的 尖 角 。 


Y \ 


4-76 更 军 的 三 角 图 形 4-77 ”一 侧 开 口 的 三 角 图 形 效 果 
如 果 把 两 个 不 同 倾 和 斜 角度 的 三 角 效 果 阁 加 ， 则 可 以 实现 更 加 刁钻 的 尖 角 效果 ， 如 图 4-79 所 示 。 





相 邻 边框 尖 角 实现 的 气 礼 对 话 框 效果 





两 个 二 角 盖 加 





4-78 一 侧 开 口 的 三 角 图 形 实际 应 用 4-79 ”三 角 舍 加 图 形 效 来 


甚 衬 我 们 可 以 借助 border 生成 的 梯形 实现 包括 IE8 浏览 器 在 内 的 
小 圆 角 效果 , 手动 输入 http://demo.cssworld.cn/4/4-3.php 或 者 扫 右 侧 的 二 
维 码 。IE8 浏览 器 下 的 效果 如 果 4-80 所 示 。 上 面 的 2 像素 圆 角 实现 原理 如 
图 4-81 所 示 。 




















“wefore 妆 成 梯形 上 同 朋 
4-80 ”border 实现 圆 角 效果 4-81 border 实现 圆 角 原理 示意 


只 要 是 与 三 角形 或 者 梯形 相关 的 图 形 ， 都 可 以 使 用 border 属性 来 模拟 。 
4.4.6 border 等 高 布局 技术 


margin+padding 可 以 实现 等 高 布局 ， 同 样 ，border 属性 也 可 以 实 
现 等 高 布局 。 

想 看 效果 ， 手 动 输入 http://demo.cssworld.cn/4/4-4.php 或 者 扫 右 侧 的 二 
维 码 。 点 击 两 个 按钮 ， 随 意 增 加 数目 ， 会 发 现 两 栏 的 背景 色 区 域 高 度 永远 都 
是 一 样 的 ， 如 图 4-82 所 示 。 




















模块 1 





4-82 ”border 等 高 布局 效果 
核心 CSS 代码 如 下 : 


.box { 
border-left: 150Px solid #333; 
background-color: #f0f3f9; 
} 
.box > nav { 
width: 1l150px; 
margin-left: 150px; 
float: left; 
} 


.box > section { 
overflow: hidden; 


也 就 是 说 ， 左 侧 深 色 背 景区 域 是 由 border-left 属性 生成 的 。 元 素 边 框 高 度 总 是 和 元 素 
目 身 高 度 保持 一 致 ， ee et 

此 方法 要 想 生 效 ， 有 一 点 需要 注意 ， 父 级 容 央 不 能 使 用 overflow:hidden 清除 浮动 影 
啊 ， 因 为 洲 出 隐藏 是 基于 rp box i 如 果 设 置 了 overflow:hidden， 则 左 浮动 的 导航 
列表 元 系 就 会 被 隐藏 挥 ， 这 显然 不 是 我 们 想 要 的 效果 。 

此 方法 与 用 margin+padding 实现 的 等 高 布局 相 比 更 加 稳健 ， 不 会 出 现 锁 点 定位 市 来 的 问 
时 ， 但 同样 它 也 是 有 局 限 性 的 。 

首先 ， 由 于 border 不 文 持 百 分 比 宽 度 ， 因 此 ， 至 少 一 栏 是 定 宽 的 布局 。 当 然 ， 如 果 
不 考虑 IE8 浏览 锋 ， 可 以 试 试 使 用 vw 单位， a 效果 。 

其 次 ， 等 高 布局 的 栏目 有 限制 。 因 为 一 个 元 素 的 边框 数目 是 有 限 的 ， 基 本 上 ，border 等 
高 布局 只 能 满足 2 一 3 栏 的 情况 ， 除 非 正好 是 等 比例 的 ， 那 还 可 以 使 用 border- style:double 
实现 最 多 7 栏 布局 ， 但 这 只 是 理论 上 而 已 。 所 以 ， 一旦 等 高 布局 栏目 过 多 ， 则 建议 使 用 
table-cell 等 高 布局 或 者 margin 负 值 等 高 布局 。 

最 终 如 何 选 型 ， 还 是 要 看 设计 需求 和 产品 的 兼容 性 要 求 。 
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块 级 元 素 负责 结构 ， 内 联 元 素 接管 内 容 ， 而 CSS 世界 是 面向 图 文 混 排 ， 也 就 是 内 联 元 素 设 
计 的 ， 由 此 可 见 ， 本 章 内 容 在 整个 CSS 世界 体系 中 占有 非常 重要 的 位 置 。 


5.1 字母 x 一 一 CSS 世界 中 隐匿 的 举足轻重 的 角色 


我 们 这 里 的 字母 x 就 是 26 个 英文 字母 中 的 x。 由 于 自身 形态 的 一 些 特 殊 性 ， 这 个 小 小 的 不 
起 眼 的 字母 担当 大 任 ， 在 CSS 世界 中 扮演 了 一 个 重要 的 角色 。 

可 能 有 人 的 第 一 反应 是 :“ 我 知道 ， 可 以 模拟 关闭 按钮 的 那个 叉 叉 效果 !” 

这 位 朋友 思维 很 活跃 ， 但 是 ， 我 们 这 里 说 的 并 不 是 字母 x 在 CSS 世界 中 的 奇 技 泽 巧 ， 而 是 
正统 的 术语 上 的 紧密 联系 。 
5.1.1 字母 x 与 CSS 世界 的 基线 

在 各 种 内 联 相 关 模 型 中 ， 凡 是 涉及 对 直方 癌 的 排版 或 者 对 齐 的 ， 都 离 不 开 最 基本 的 基线 
(baseline )。 例 如 ，line-height 行 融 的 定义 就 是 两 基线 的 间距 ，vertical-align 的 默认 


值 束 是 基线 , 其 他 中 线 顶 线 一 类 的 定义 也 离 不 开 基 线 , 基线 甚至 衍生 出 了 很 多 其 他 基线 概念 (如 
图 5-1 所 示 )。 









































a. “字母 ”基线 (英文) b. “ 晨 挂 ”基线 (印度 文 ) 5. 
图 5-1 一 些 基线 示意 
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那 大 家 知 章 基 线 又 是 如 何 定义 的 吗 ? 基线 的 定义 就 离 不 开本 文 的 主角 x。 
字母 x 的 下 边缘 ( 线 ) 就 是 我 们 的 基线 。 
对 ， 是 字母 x， 不 是 s 之 类 下 面 有 尾巴 的 字母 ， 参 见 如 图 5-2 所 示 的 标示 。 


sphinx - 


图 5-2 CSS 中 的 基线 示意 


5.1.2 字母 x 与 CSS 中 的 x-height 


字母 x 与 CSS 的 故事 远 不 止 基线 这 么 简单 。CSS 中 有 一 个 概念 叫 作 x-height， 指 的 是 字 
x 的 高 度 。 

有 人 可 能 会 有 疑问 了 :“ 一 个 字母 的 高 度 跟 CSS 布局 排版 有 什么 关系 啊 ? ”实际 上 关系 可 
大 了 

首先 需要 了 解 一 下 x-height 的 含义 .通俗 地 讲 , x-height 指 的 就 是 小 写字 母 x 的 高 度 ， 
术语 描述 束 是 基线 和 等 分 线 (mean line)〈 也 称 作 中 线 ，midline) 之 间 的 距离 。 

维 其 上 有 一 个 示意 图 , 如 图 5-3 所 示 。x-height ascent ascenderheignt 





























的 示意 苑 围 一 目 了 然 。 ep helo 5 
图 5-3 中 还 出 现 了 其 他 的 名 词 ， 这 里 简单 说 “ ”一 … a 
一 下 我 的 理解 。 descent descender height 
。 ascender height: 上 下 线 高 度 。 5.3 x-height 示意 


。 cap height: 大 写字 母 高 度 。 

。 Imedian: 中 线 。 

e。 descender height: 下 行 线 高 度 。 

CSS 中 有 些 属性 值 的 定义 就 和 这 个 x-neight 有 关 ， 最 典型 的 代表 就 是 vertical- 
align:middle。 这 里 的 middle 是 中 间 的 意思 。 注 意 ， 跟 上 面 的 median〔 中 线 ) 不 是 一 个 
意思 。 在 CSS 世界 中 ，midqle 指 的 是 基线 往 上 1/2 x-heignt 高 度 。 我 们 可 以 近似 理解 为 字 
x 交叉 点 那个 位 置 。 

由 此 可 见 ，vertical-align:middle 并 不 是 绝对 的 竺 百 居 中 对 齐 ， 我 们 平 间 看 到 的 
middle 效果 只 是 一 种 近似 效果 。 原 因 很 简单 ， 因 为 不 同 的 字体 在 行内 盒子 中 的 位 置 是 不 一 样 
的 ， 比 如 ,“ 微 软 雅 黑 ” 就 是 一 个 字符 下 沉 比 较 明显 的 字体 ， 所 有 字符 的 位 置 都 比 其 他 字体 要 偏 
下 一 点 儿 。 也 就 是 说 ,“ 微 软 雅 黑 ” 字 体 的 字母 x 的 交 义 点 是 在 容器 中 分 线 的 下 面 一 点 。 此 时 ， 
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我 们 就 不 难 理解 为 什么 vertical-align:middle 不 是 相对 容器 中 分 线 对 齐 的 了 ， 因 为 在 毕 











级 容器 所 言 
5.1.3 字母 x 与 CSS 中 的 ex 


字母 x 生生 出 了 x-height 概念 ， 并 在 这 个 基础 上 深耕 细作 ， 进 一 步 衍 生出 了 sex。 注意 ， 
这 里 的 ex 是 CSS 中 地 地 道道 的 一 个 尺寸 单位 。 

大 家 可 能 都 听 过 和 用 过 em、px 和 rem， 但 对 连 IE6 都 老 早 支持 的 ex 单位 却 很 陌生 。 

ex 是 CSS 中 的 一 个 相对 单位 ， 指 的 是 小 写字 母 x 的 高 度 ， 没 错 ， 束 是 指 x-height。 

那 这 个 单位 有 什么 实际 用 途 呢 ?存在 必 有 价值 ! 用 得 少 ， 并 不 表示 其 没有 作用 ， 只 是 因为 
我 们 并 没有 好 好 地 理解 它 、 挖 气 它 。 我 们 细 细 思考 字母 x 在 CSS 世界 中 扮演 的 角色 ， 束 会 发 现 
ex 的 价值 所 在 。 

注意 ， 虽 然 说 em、px 这 类 单位 的 主要 作用 是 限定 元 素 的 尺寸 ， 但是， 由 于 字母 x 受 字 体 
等 CSS 属性 影响 大 ， 不 稳定 ， 因 此 ex 不 太 适 合用 来 限定 元 素 的 尺寸 。 那 问题 来 了 : ex 连 上 自己 
的 本 职工 作 都 做 不 好 ， 难 道 还 指望 其 副业 开 挂 ? 

没 错 ，ex 的 价值 束 在 其 副业 上 不 受 字 体 和 字 亏 影响 的 内 联 元 素 的 垂直 证 中 对 齐 
效果 。 

我 们 都 知道 ， 内 联 元 素 默认 是 基线 对 齐 的 ， 而 基线 束 是 x 的 抵 部 ， 而 1ex 就 是 一 个 x 的 高 
度 。 设 想 一 下 ,假如 图 标高 度 就 是 1ex， 同 时 背景 图 片 居 中 ， 电 不 是 图 标 和 文字 天 然 垂 直 居 中 ， 
而 且 完 全 不 受 字 体 和 字号 的 影响 ? 因为 ex 就 是 一 个 相对 于 字体 和 字号 的 单位 。 

文字 表述 比较 苍白 ， 我 们 来 看 一 个 例子 。 图 5-4 所 示 的 文字 后 面 跟 着 一 个 小 三 角形 图 标的 效 
果 是 非常 常见 的 。 现 在 ， 要 让 该 图 标 和 文字 中 间 位 置 对 齐 ， 你 会 如 ES 
何 实现 ? 设 定 好 尺寸 ， 然 后 使 用 vertical-align:middle? 这 | | 
样 昌 然 也 有 效果 ， 但是， 实际 上 嘿 哑 了， 借助 ex 单位 ,我 们 直接 ”图 54 文字 与 小 三 角 图 标 
利用 默认 的 baseline 基线 对 齐 就 可 以 实现 这 个 效果 。 

CSS 代码 如 下 : 


.lcon-arrow { 



























































display: inline-block; 

width: 20px; 

height: lex; 

background: url (arrow.png) no-repeat center ， 


} 
然后 束 对 齐 了， 完全 没有 vertical-align 出 场 的 机 会 。 

眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/S/1-1.php 或 者 扫 右 侧 的 二 
维 码 。 你 会 发 现 ， 束 算 我 们 把 字体 修改 ， 把 字号 设置 得 很 大 ， 对 齐 依然 民 
好 ， 如 图 5-5 所 示 。 
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图 5-5 使 用 ex 单位 对 齐 不 受 字 体 和 字号 影响 


5.2 内 联 元 又 的 基石 Line-height 


本 节 中 1ine-height 的 内 容 会 涉及 很 多 内 联 盒 模型 的 知识 ， 因 此 ， 务 必 先 要 笃 握 3.4.2 
节 关 于 内 联 盒 模型 的 知识 。 男 外 ， 下 文中 所 有 的 “ 行 品 ” 指 的 就 是 line-height。 


5.2.1 内 联 元 素 的 局 度 之 本 

先 思考 下 面 这 个 问题 : 默认 空 <div> 蜗 度 是 0， 但 是 一 旦 里 面 写 上 几 个 文字 ，<div> 局 度 
束 有 有 了， 请问 这 个 高 度 由 何 而 来 ， 或 者 说 是 由 哪个 CSS 属性 决定 的 ? 

如 果 仪 仪 通过 表象 来 确认 ， 估 计 不 少 人 会 认为 <div> 高 上 度 是 由 里 面 的 文字 撑 开 的 ， 也 束 是 
font-size 决定 的 ， 但 本 质 上 是 由 1ine-height 属性 全 权 诀 定 的 ， 尽 管 某 些 场景 确实 与 
font-size 大 小 有 天 。 

我 们 不 妨 设计 一 个 简单 的 例子 来 看 看 真相 客 竟 是 什么 。 例 如 : 

<div class="test1"> 我 的 高 度 是 ? </div> 

.testl { 

font-size: 16px; 


line-height: 0; 


border: lpx solid #ccc; 





line-—height 


























background: #eee; 


和 


<div class="test2"> 我 的 高 度 是 ”</div> 
.testl1 { 
font-size: 0; 
line-height: 16px; 
border: lpx solid #ccc; 
background: #eee; 


} 
这 两 段 代 人 码 的 区 别 在 于 一 个 Line-height 行 高 为 0， 一 个 font-size 字号 为 0。 结 果 ， 第 
一 段 代码 ， 最 后 元 素 的 高 度 只 剩 下 边框 那么 丁点 儿 ， 而 后 面 
一 段 代码 ， 虽 然 文字 小 到 都 看 不 见 了 ， 但 是 16px 的 内 部 高 
度 依 然 坚 挺 ， 如 图 5-6 所 示 。 

很 显然 ， 从 上 面 这 个 例子 可 以 看 出 ，<dqiv> 高 度 是 由 行 
高 决定 的 ， 而 非 文 字 。 











图 5-6 ”文字 局 度 本 质 上 由 行 蜗 决定 
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眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/5/2-1.php 或 者 扫 右 侧 的 二 维 码 。 

下 面 要 说 一 些 很 有 意思 的 结论 ， 对 于 非 蔡 换 元 素 的 纯 内 联 元 系 ， 其 可 
视 高 度 完全 由 Line-height 决定 。 注 意 这 里 的 措辞 一 一 “完全 ”什么 
padding、border 属性 对 可 视 高 度 是 没有 任何 影响 的 ， 这 也 是 我 们 平 第 
口中 的 “ 盒 模型 ”约定 俗 成 说 的 是 块 级 元 叉 的 原因 。 

因此 ， 对 于 文本 这 样 的 纯 内 联 元 系 ，Line-height 束 是 高 度 计 算 的 
基石 ， 用 专业 说 法 束 是 指定 了 用 来 计算 行 框 例子 高 度 的 基础 高 度 。 比 方 说 ， ee lolit 设 为 
16px， 则 一 行文 字 高 度 是 16px， 两 行 束 是 32px， 三 行 束 是 48px， 所 有 浏览 器 泻 染 解析 都 是 
这 个 值 ，1 像素 都 不 差 。 

那 如 果 是 蔡 换 元 素 ， 又 或 者 是 块 级 元 素 ，Line-height 在 其 中 又 扮演 什么 角色 了 呢 ? 

在 回答 这 个 问题 之 前 ， 我 们 最 好 先 把 1ine-height 作用 于 内 联 元 素 的 细节 给 搞 明 白 。 

通常 ，l1ine-height 的 高 度 作 用 细节 都 是 使 用 “行距 ”和 “ 半 行 距 ” 来 解释 上 的。 那么 什 
么 是 “行距 2?， 什 么 又 是 “ 半 行 距 ” 呢 ? 

首先 大 家 需要 明确 这 一 点 : 字体 设计 以 及 文字 排版 是 门 很 深入 的 学 问 ， 英 文 和 中 文 双 有 很 
多 不 同 之 处 ， 但 是 ， 我 们 平常 构建 页 面 无 须 如 此 事 无 巨细 的 知识 。 因 此 ， 这 里 只 简单 介绍 部 分 
知识 ， 方 便 大 家 理解 某 些 行为 和 特性 ， 更 多 内 容 会 在 第 8 章 中 披露 。 

我 个 人 是 这 么 认为 的 : 内 联 元 素 的 高 度 由 固定 高 度 和 不 固定 高 度 组 成 ， 这 个 不 固定 的 部 
分 就 是 这 里 的 “行距 ” 换 句 话说 ，1line-height 之 所 以 起 作用 ， 就 是 通过 改变 “行距 ”来 
实现 的 。 

中 国 古代 四 大 友 明 之 一 的 活字 印刷 术 使 用 的 是 雕刻 好 的 胶泥 字模 ， 大 家 可 以 回忆 一 下 北 












































YES 





束 奥 运 会 开 妖 式 上 活字 印刷 林 表 演 中 那些 串 起 的 方块 ， 它 使 用 的 字体 是 宋体 ， 注 意 ， 契 宋体 。 


然而 ， 如 果 这 些 方 块 都 是 密 密 奈 厅 无 颖 际 铺 在 一 
起 ， 印 出 来 的 文字 就 是 方 方 正 正 的 一 团 ， 那 么 我 
们 会 无 法 一 眼看 出 应 该 横着 读 还 是 竖 着 仿 。 要 知 
道上 古人 的 排版 是 竖 排 的 ， 但 我 们 去 看 古人 的 印刷 
作品 却 不 会 错误 地 横着 看 ， 为 什么 呢 ?” 因 为 印 出 
来 的 文字 垂直 方 同 确实 一 个 接着 一 个 ， 但 是 ， 水 
平方 向 ， 列 与 列 之 间 却 有 着 明显 的 间隙 ， 如 图 5-7 小 二 
所 示 ， 这 个 间 隐 其 实 惑 是 “行距 ”。 图 5-7 ”活字 印刷 之 列 间 距 

所 以 ,“ 行 距 ” 的 作用 是 可 以 瞬间 明确 我 们 的 阅读 方向 ， 让 我 们 阅读 文字 更 轻松 。 在 CSS 世 
界 中 ,“ 行 距 ” 其 实 也 是 类 似 的 东西 ， 但 还 是 有 些 差别 的 。 以 水 平 阅读 流 举例 ， 传 统 印 刷 的 “行距 ” 
是 上 下 两 行文 字 之 间 预 留 的 间 际 ， 是 个 独立 的 区 域 ， 也 就 意味 着 第 一 行文 字 的 上 方 是 没有 “行距 ” 
的 ; 但 是 在 CSS 中 ,“ 行 距 ” 分 散在 当前 文字 的 上 方 和 下 方 ， 也 就 是 即使 是 第 一 行文 字 ， 其 上 方 也 
是 有 “行距 ”的 ， 只 不 过 这 个 “行距 ”的 高 度 仅 仅 是 完整 “行距 ”高 度 的 一 半 ， 因 此 ， 也 被 称 为 “ 半 
行距 ”。 

































116 第 5 章 ”内 联 元 素 与 流 





人 总 是 先入 为 主 ， 尤 其 是 前 端 人 员 ， 排 版 知识 的 获取 基本 上 都 是 从 CSS 实际 工作 中 来 ,就 
会 很 自然 地 认为 “间距 就 是 应 该 上 下 等 分 啊 ” 实际 上 太 天 真 了 ， 且 先 不 说 传统 印刷 的 “行距 ” 
在 中 间 ， 著 名 的 排版 软件 Adobe InDesign 的 “行距 ” 束 是 加 在 文字 上 方 的 ， 所 以 没有 什么 理 所 
当然 。 

现在 知道 了 CSS 的 “ 半 行 距 ” 那么 哪里 到 哪里 才 是 “ 半 行 距 ” 的 高 度 范 围 呢 ? 一 般 业 界 
的 共识 是 : 行距 = 行 高 -em-box。 转 换 成 CSS 语言 束 是 : 行距 = line-height - font-size。 
其 中 em-box 是 CSS 世界 中 比较 虚 的 一 个 概念 ， 说 “ 虚 ” 并 不 是 胡 编 乱 造 的 意思 ， 而 是 我 们 无 
法 有 效 感 知 这 个 盒子 具体 的 位 置 在 哪里 ， 但 是 有 一 点 可 以 明确 ， 束 是 其 高 度 正 好 就 是 1em。em 
是 一 个 相对 font-size 大 小 的 CSS 单位 ， 因 此 lem 等 用 于 当前 一 个 font-size 大 小 ， 这 束 
是 “行距 = line-height - font-size” 这 个 公式 的 由 来 。 有 了 “行距 ”， 我 们 一 分 为 二 ， 
就 有 了 “ 半 行 距 ?， 分 别 加 在 em-box 上 和 面 和 下 面 就 构成 了 文字 的 完整 高 度 了 。 话 虽 这 么 讲 ， 但 
一 旦 不 弄 清楚 em-box 完 竟 在 什么 位 置 , 我 们 就 无 法 在 脑 中 形成 关于 行 高 的 具象 认 知 , 知识 很 容 
易 遗 护 。 

人 很 容易 被 肉眼 所 见 的 东西 迷惑 ， 因 此 ， 很 多 人 会 把 文字 图 形 区 域 看 成 是 em-box 范围 ， 
实际 上 这 是 不 正确 的 ， 比 方 说 ， 一 些 融 尾巴 的 英文 字符 qd 或 者 g， 其 小 尾巴 是 在 em-box 范围 之 
外 的 ， 而 对 于 汉字 ， 很 多 字体 图 形 高 度 实际 上 要 小 于 em-box 高 度 的 。 

此 时 , 就 轮 到 内 容 区 域 (content area) 出 马 了 。 在 本 书 中 , 内容 区 域 可 以 近似 理解 为 Firefox/IE 
浏览 器 下 文本 选中 带 背 景色 的 区 域 。 这 么 理解 的 重要 原因 之 一 束 是 可 见 ， 这 对 于 我 们 深入 理解 
内 联 元 素 知识 非常 有 帮助 。 

大 多 数 场 景 下 ， 内 容 区 域 和 em-box 是 不 一 样 的 ， 内 容 区 域 高 度 受 font-family 和 
font-size 双重 影响 ， 而 em-box 仅 受 font-size 影响 ， 通 稼 内容 区 域 高 度 要 更 高 一 些 。 除 
了 下 面 这 种 情况 ， 也 就 是 “ 当 我 们 的 字体 是 宋体 的 时 候 ， 内 容 区 域 和 em-box 是 等 同 的 ” 因为 
宋体 是 一 种 正统 的 印刷 字体 ， 方 方正 正 ， 所 以 千 万 不 要 小 看 宋体 。 

于 是 ， 利 用 我 们 平津 不 每 见 的 宋体 ， 束 能 准确 揪 出 “ 半 行 距 ” 的 藏 喘 之 所 了 ， 测 试 代码 如 下 : 


.test { 
font-family: simsun; 

































































font-size: 24px; 
line-height: 36px; 
background-color: yellow; 
l; 
.test > span { 
background-color: white; 
} 
<div class="test"> 
<span>sphinx</span> 
/ALY> 


此 时 ,平常 虚无 的 em-box 借助 内 容 区 域 (图 5-8 中 字符 sp 的 选中 区 域 ) 暴露 出 了 庐山 真面目 ， 
“ 半 行 距 ” 也 准确 显现 出 来 了 ， 如 图 5-8 右 侧 标注 。 
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line-heleht:120p 





5-8 ” 半 行 间距 

眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/5/2-2.php。 

学 习 基 础 理论 知识 的 好 处 之 一 就 是 可 以 更 准确 地 进行 技术 实践 , 比方 说 这 里 , 我 们 知道 “ 半 
行距 ”的 位 置 和 范围 ， 就 可 以 更 准确 地 帮助 我 们 还 原 设计 。 

可 能 是 由 于 CSS 开发 人 员 不 够 专注 细致 ， 外 加 规范 设计 本 喘 的 原因 ， 设计 师 往 往 会 对 各 个 
元 素 间 的 距离 间 际 标注 得 很 清晰 。 但 是 ， 设 计 师 并 不 是 开发 人 员 ， 他 们 并 没有 把 网 页 中 无 处 不 
在 行 间距 考虑 在 内 ， 所 有 与 文字 相关 的 间距 都 是 从 文字 的 上 边缘 和 下 边缘 开始 标注 的 。 除 非 我 
们 全 局 行 高 设置 为 1ine-height:1， 人 否则 这 些 标注 的 距离 和 我 们 使 用 的 margin 间距 都 是 不 
一 致 的 。 

但 是 ， 如 末 我 们 理解 了 半 行 距 ， 结 合 我 们 网 页 中 的 设置 的 1ine-height 大 小 ， 残 能 根据 
标注 获取 准确 的 间距 值 。 举 个 例子 ， 假 设 Line-height 是 1.5，font-size 大 小 是 14px， 
那么 我 们 的 半 行 距 大 小 就 是 〈 套 用 上 面 的 行距 公式 再 除 以 2): (14px * 1.5 - 14px) / 2 
= 14px * 0.25 = 3.5px。border 以 及 1ine-height 等 传统 CSS 属性 并 没有 小 数 像 素 
的 概念 《从 CSS3 动画 的 细 肛 程度 可 以 看 出 )， 因 此 ， 这 里 的 3.5px 需要 取 整 处 理 ， 如 采 标 注 
的 是 文字 上 边 距 ， 则 同 下 取 整 ， 如 果 是 文字 下 边 距 ， 则 加 上 取 整 ， 因 为 绝 大 多 数 的 字体 在 内 容 
区 域 中 都 是 偏 下 的 。 所 以 ， 假 设 设计 师 标注 了 文字 字形 上 边缘 到 图 厂 下 边缘 间距 20px， 则 我 
们 实际 的 margin-top 值 应 该 是 17px， 因 为 3.5px 问 下 取 整 是 3px。 

下 面 回 到 最 初 的 问题 , 1ine-height 如 何 通 过 改变 行距 实现 文字 排版 ? 当 1ine-height 
设 为 2 的 时 候 ， 半 行距 是 一 半 的 文字 大 小 ， 两 行文 字 中 间 的 间 际 差不多 一 个 文字 尺寸 大 小 ; 如 
果 line-height 大 小 是 1 倍 文字 大 小 ， 则 根据 计算 ， 半 行距 是 0， 也 就 是 两 行文 字 会 紧密 依 
假 在 一 起 ; 如 果 line=heLighit 值 是 0.5， 则 此 时 的 行距 就 是 负 值 ， 虽 然 line=heliglit 不 文 
持 负 值 ， 但 是 行距 可 以 为 负 值 ， 此 时 ， 两 行文 字 就 是 重 登 纠缠 在 一 起 。 有 具体 表现 如 图 5-9 所 示 。 
图 5-9 有 对 应 的 实例 页 面 ， 有 兴趣 的 话 可 以 手动 输入 http://demo.cssworld.cn/5/2-3.php 或 者 扫 下 


面 的 二 维 码 。 
二 硕 和 


5-9 line-heignht 通过 控制 行距 实现 文字 排版 
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说 完了 内 联 元 素 ， 下 面 轮 到 痊 换 元 素 和 块 级 元 素 了 。 

关于 蔡 换 元 素 的 高 度 与 1ine-height 的 关系 首先 需 要 弄 明 白 这 个 问题 line-heignht 
可 以 影响 蔡 换 元 际 〈 如 图 片 的 高 度 ) 吗 ? 答案 是 ， 不 可 以 ! 

可 能 有 人 会 反驳 了 ， 不 会 呀 ， 你 看 下 面 这 个 例子 : 


.box { 
line-height: 2506px; 
} 


<div class="box"> 

















<img src="1 .jpg" height="128"> 
< OLY 


<div> 元 系 中 ， 就 一 张 图 片 ， 其 他 什么 都 没有 ， 但 此 时 .box 元 系 高 度 却 是 256px， 难 道 不 是 
line-height 把 图 片 占据 的 高 上 度 变 高 了 吗 ? 

不 是 的 ， 不 是 line-heignt 把 图 片 占 据 高 度 变 高 了 ， 而 是 把 “幽灵 空 日 节点 ”的 高 度 变 
高 了 。 图 片 为 内 联 元 素 ， 会 构成 一 个 “ 行 框 例子 ”， 而 在 HIMLS 文档 模式 下 ， 每 一 个 “ 行 框 盒 
子 ” 的 前 面 都 有 一 个 宽度 为 0 的 “幽灵 空 晶 节点 ”其 内 联 特性 表现 和 普通 字符 一 模 一 样 ， 所 以 ， 
这 里 的 容器 高 度 会 等 于 Line-height 设置 的 属性 值 256px。 

实际 开发 的 时 候 ， 图 文 和 文字 混在 一 起 是 很 弟 见 的 ， 那 这 种 内 联 蔡 换 元 素 和 内 联 非 芍 换 元 
系 在 一 起 时 的 高 度 表现 又 是 怎样 的 呢 ? 

由 于 同属 内 联 元 素 ， 因 此 ， 会 共同 形成 一 个 “ 行 框 盒子 ” 1ine-height 在 这 个 混合 元 素 
的 “ 行 框 盒子 ”中 扮演 的 角色 是 决定 这 个 行 盒 的 最 小 高 度 ， 听 上 去 似乎 有 点 儿 和 七 多 ， 对 于 纯 文 
本 元 素 ，1Line-heigpht 非常 威风 ， 直 接 决 定 了 最 终 的 高 度 。 但 是 ， 如 果 同 时 有 蔡 换 元 素 ， 则 
line-heignt 的 表现 一 下 子 弱 了 了 很多， 只 能 决定 最 小 高 度 ， 对 最 终 的 高 度 表 现 有 望 侍 碘 及 之 
感 。 为 什么 会 这 样 呢 ? 一 是 蔡 换 元 素 的 高 度 不 受 Line-height 影响 , 二 是 vertical-align 
属性 在 背后 作 时 。 

对 于 这 种 混合 蔡 换 元 系 的 场景 ，l1ijne-height 要 和 想 一 统 江 山 ， 需 要 值 足 够 大 才 行 。 但 是 ， 
实际 开发 的 时 候 ， 我 们 给 Line-height 设置 的 值 总 是 很 中 规 中 和 矩 ， 于 是 ， 束 会 出 现 类 似 下 面 
的 场景 : 明明 文字 设置 了 line-height 为 20px， 但 是 ， 如 果 文 字 后 面 有 小 图 标 ， 最 后 “ 行 
框 盒子 ”高 度 却 是 21px 或 是 22px。 这 种 现象 背后 最 大 的 黑手 其 实 是 vertical-align 属性 ， 
我 们 会 在 下 一 章 好 好 深入 齐 析 为 什么 会 有 这 样 的 表现 。 

对 于 块 级 元 素 ，Line-height 对 其 本 里 是 没有 任何 作用 的 , 我 们 平时 改变 Line-height， 
块 级 元 又 的 高 度 跟着 变化 实际 上 是 通过 改变 块 级 元 素 里 面 内 联 级 别 元 素 占 据 的 高 度 实现 的 。 

比方 说 ， 一 个 <p> 元 素 中 有 10 行 图 文 内 容 ， 则 这 个 <p> 元 系 的 高 上 度 束 是 由 这 10 行内 容 产 
生 的 10 个 “ 行 框 例子 ”高 上 度 囚 加 而 成 ; 一 个 <article> 元 素 中 可 能 会 有 20 个 <p> 元 素 ， 则 这 
个 <article> 元 勾 又 是 由 这 20 个 块 级 <p> 元 系 高 度 累 加 而 成 ， 同 时 块 级 元 取 还 可 以 通过 
height 和 min-height 以 及 使 模 型 中 的 margijn、padding 和 border 等 属性 改变 占据 的 高 
度 ， 所 有 这 一 切 就 构成 了 CSS 世界 完整 的 高 度 体系 。 

因为 1ine-height 几乎 无 处 不 在 的 继承 特性 ,并 且 CSS 世界 是 为 了 更 好 地 图 文 展示 ,所 
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以 1ine-height 不 仅 是 内 联 元 兹 高 度 的 基石 ， 而 且 还 是 整个 CSS 世界 高 度 体 系 的 基石 。 
5.2.2 为 什么 Line-height 可 以 让 内 联 元 素 “ 垂 直 居 中 ” 


坊间 流传 着 这 么 一 种 说 法 :“ 要 想 让 单行 文字 垂直 居中 ， 只 要 设置 Line-height 大 小 和 
height 高 度 一 样 瓯 可 以 了 。.” 类 似 下 面 这 样 的 代码 : 

ee 

height: 24px; 


line-height: 24px; 
} 


从 效果 上 看 ， 似 乎 验证 了 这 种 说 法 的 正确 性 。 但 是 ， 实 际 上 ， 上 面 的 说 法 对 CSS 初学 者 会 产生 
两 个 严重 的 误导 ， 同 时 ， 语 名 本 身 也 存在 不 严谨 的 地 方 ! 

误区 之 一 : 要 让 单行 文字 垂直 居中 , 只 需要 1ine-height 这 一 个 属性 束 可 以 , 与 height 
一 点 儿 关 系 都 没有 。 也 就 是 说 ， 我 们 直接 : 

| 


line-height: 24px; 
} 


就 可 以 了 。 坊 间 传 闻 的 说 法 会 误导 大 小 一 定 要 同时 设置 neight 属性 才 可 以 。 

误区 二 : 行 高 控制 文字 垂直 居中 ， 不 仅 适 用 于 单行 ， 多 行 也 是 可 以 的 。 准 确 的 说 法 应 该 是 
“1ine-height 可 以 让 单行 或 多 行 元 素 近似 垂直 居中 ”。 稍 等 ， 这 里 有 个 词 似 乎 和 上 面 的 表述 
有 点 儿 微 妙 的 差异 ,“ 近 似 垂直 居中 ”? 没 错 ， 一 定 要 加 上 “近似 ”二 字 ， 这 样 的 说 法 才 足 够 严 
说 。 换 名 话说， 我 们 通过 line-heignht 设置 的 垂直 居中 ， 并 不 是 真正 意义 上 的 垂直 居中 ! 究 
竞 是 怎么 一 回 事 ? 

这 里 ， 其 实 要 解答 的 是 两 个 问题 ， 一 个 是 为 何 可 以 “垂直 居中 ” 另 一 个 是 为 何 是 “近似 ” 

正如 上 一 节 所 说 的 ， 没 有 什么 理所当然 ， 行 高 可 以 实现 “垂直 居中 ”原因 在 于 CSS 中 “ 行 
距 的 上 下 等 分 机 制 ”， 如 果 行 距 的 添加 规则 是 在 文字 的 上 方 或 者 下 方 , 则 行 高 是 无 法 让 文字 垂直 
居中 的 。 

说 “近似 ”是 因为 文字 字形 的 垂直 中 线 位 置 普遍 要 比 真正 的 “ 行 框 盒子 ”的 垂直 中 线 位 置 
低 ， 壁 如 我 们 拿 现在 用 得 比较 多 的 微软 雅 黑 字体 举例 : 


| 
font-size: 80px; 









































line-height: 120px; 
background-color: #666; 
font-family: ‘microsoft yahei'; 
color: #fff; 

} 


<p> 微 软 雅 黑 </p> 


结果 ， 我 都 不 需要 标注 ， 肉 眼 束 能 看 出 字形 明显 偏 下 ， 如 图 5-10 所 示 。 
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由 于 我 们 平时 使 用 的 font-size 都 比较 小 ， 2pX“*16BX 很 多 ， 因 此 ， 虽 然 微 软 雅 黑 字 


体 有 下 沉 ， 但 也 就 1 像素 的 样子 ， 所 以 我 们 往往 觉察 不 到 
这 种 “垂直 对 齐 ” 其 实 并 不 是 真正 意义 上 的 垂直 居中 ， 只 


] Wg NS 
是 感官 上 看 上 去 像 是 秋 直 居中 时 了 。 这 也 是 我 总 是 区 皮包 起 电 旺 二 


line-height 实现 的 单行 文本 和 搁 直 居中 为 “近似 垂直 居 


























中 ”的 原因 。 5-10 line-height 与 位 置 下 沉 的 
下 面 再 来 说 说 行 高 实现 多 行文 本 或 者 图 片 等 蔡 换 元 微软 雅 四 字体 


素 的 垂直 居中 效果 实现 。 
多 行文 本 或 者 蔡 换 元 素 的 垂直 居中 实现 原理 和 单行 文本 就 不 一 样 了 ， 需 要 line-height 
属性 的 好 朋友 vertical-align 属性 帮助 才 可 以 ， 示 例 代 码 如 下 : 


.box { 
line-height: 120px; 
background-color: #f0f3f9; 
} 
.Content { 
display: inline-block; 
line-height: 20px; 
margin: 0 20px; 
vertical-align: middle; 
} 
<div class="box"> 
<div clase="oontent"> 基 十 行商 实现 的 .</div> 
</div> 


效果 如 图 5-11 所 示 。 有 眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/5/2-4.php 或 者 扫 下 面 的 
二 维 码 。 





基于 行 高 实现 的 多 行文 字 琴 直 居 中 效 
时 ， 需 要 vertical-align 必 性 帮助 。 





5-11] line-height 与 多 行文 字 垂 直 居 中 效果 


实现 的 原理 大 致 如 下 。 

(1) 多 行文 字 使 用 一 个 标签 包 右 ， 然 后 设置 display 为 jnline-block。 好 处 在 于 既 能 
重 置 外 部 的 line-heignt 为 正音 的 大 小 ， 又 能 保持 内 联 元 素 特 性 ， 从 而 可 以 设置 
Vertlical=alLlgrn 属性 ， 以 及 产生 一 个 非常 关键 的 “ 行 框 例子” 我 们 需要 的 其 实 并 不 是 这 个 
“ 行 框 例子 ”， 而 古 每 个 “ 行 框 盒子 ”都 会 附 市 的 一 个 产物 一 一 “幽灵 空 晶 节点” 即 一 个 宽度 为 
0、 表 现 如 同 普通 字符 的 看 不 见 的 “节点 ”。 有 了 这 个 “幽灵 空白 节点 ”， 我 们 的 Line- 
height:120px 就 有 了 作用 的 对 象 ， 从 而 相当 于 在 .content 元 素 前 面 撑 起 了 一 个 高 度 为 
120px 的 宽度 为 0 的 内 联 元 素 。 
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(2) 因 为 内 联 元 素 默 认 都 是 基线 对 齐 的 , 所 以 我 们 通过 对 .content 元 系 设 置 vertical- 
align:miqddle 来 调整 多 行文 本 的 垂直 位 置 ， 从 而 实现 我 们 想 要 的 “垂直 居中 ”效果 。 如 果 是 
要 借助 1ine-height 实现 网 片 垂直 后 中 效果 ， 也 是 类 似 的 原理 和 做 法 。 

细心 的 读者 可 能 发 现 ， 上 面 我 解释 原理 的 时 候 ,“ 垂 直 拓 中 ”这 4 个 字 加 了 引号 ， 砚 非 ， 
这 里 的 “垂直 居中 ” 义 古 “近似 ”? 

你 还 真 说 对 了 ， 这 里 实现 的 “垂直 居中 ”确实 也 不 是 真正 意义 上 的 垂直 居中 ， 也 是 “近似 
琴 直 居中 ”。 偿 是 上 面 的 多 行文 本 乘 下 居中 的 例子 ， 如 末 我 们 捕获 玉 A s 间 ]， 








截 个 图 ， 然 后 通过 尺子 工具 一 量 束 会 发 现 ， 上 而 的 留 空 是 240 x40 er 
41Px， 下 面 的 留 空 是 39Px， 对 啦 ， 原 来 不 是 完全 的 垂 生 后 Re 2 
中 ， 如 图 5-12 所 示 ” 举 , 需要 vertical-align 属 性 帮助 。 中 

不 垂直 居中 与 ]ine- height 无 天 ， 而 是 vertical- i 
align 导致 的 ， 有 具体 原因 我 们 将 在 5.3 市 讲解 。 图 5-12 上 下 留 白 大 小 是 不 一 样 的 


5.2.3 深入 Line-height 的 各 类 属性 值 


line-height 的 默认 值 是 normal， 还 支持 数值 、 百 分 比值 以 及 长 度 值 。 

首先 了 解 一 下 这 个 看 上 去 一 般 实际 上 不 一 般 的 normal。 为 什么 说 Line-height 的 默 
认 值 normal 不 一 般 昵 ?因为 ， 本 质 上 ， 这 个 normal 实际 上 是 一 个 变量 。 我 想 ， 很 多 人 
脑 中 的 想法 应 该 是 这 样 的 : normal 应 该 对 应 一 个 具体 的 行 高 值 ， 按 照 经验 关 不 多 1 倍 多 一 
点 儿 的 样子 ， 有 具体 值 多 少 需要 测试 一 下 才 知 道 。 实 际 上 非 也 ! normal 实际 上 是 一 个 和 
font-family 有 着 密切 关联 的 变量 值 。 什 么 意思 昵 ? 比 方 说 ,一 个 <div> 元 素 ， 有 两 段 对 
比 CSS 如 下 : 


div f{ 
line-height: normal; 





font-family: "microsoft yahei'; 


} 


div f{ 
line-height: normal; 
font-family: simsun; 


} 


此 时 两 段 CSS 中 1ijne-height 的 属性 值 normal 的 计算 值 是 不 一 样 的 , 表 5-1 给 出 的 是 我 在 
几 个 虹 面 浏览 器 的 测试 数据 。 


表 5-1 不 同 字体 下 的 Line-height :normal 解析 值 


字体 E 
宋体 1.141 1.142 a 
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可 以 看 到 , 只 要 字体 确定 , 各 个 浏览 器 下 的 默认 Line-height 解析 值 基本 上 都 是 一 样 的 。 
然而 ， 关 键 问 题 是 ， 不 同 的 浏览 费 所 使 用 的 默认 中 英文 字体 并 不 是 一 样 的 ， 并 且 不 同 操作 系统 
的 默认 字体 也 不 一 样 ， 换 人 句 话说 ， 束 是 不 同系 统 不 同 浏览 器 的 默认 Line-heigpht 都 是 有 差 下 
的 。 因 此 ， 在 实际 开发 的 时 候 ， 对 Line-height 的 默认 值 进行 重 置 是 势 在 必 行 的 。 下 面 问 题 
来 了 ，1Line-height 应 该 重 置 为 多 大 的 值 呢 ? 是 使 用 数值 、 百 分 比值 还 是 长 度 值 呢 ? 

要 回答 这 个 问题 ， 我 们 需要 先 对 这 几 种 属性 值 有 一 定 的 了 解 才 行 。 

e。 数值 ， 如 re Te ol 其 最 终 的 计算 值 是 和 当前 font-size 相 乘 后 的 值 。 
例如 ， 假 设 我 们 此 时 的 font-size 大 小 为 1 4px, 则 LT he ht 让 复 信 十 
ao* lA 

e。 百分比 值 ， 如 1ine-heighnt:150%， 其 最 终 的 计算 值 是 和 当前 font-size 相 乘 后 
的 值 。 例 如 ,假设 我 们 此 时 的 font-size 大 小 为 1 4px, 则 LIne heLrohnt 计算 值 是 
150%*14px=21px。 

e 长 度 值 ， 也 就 是 带 单 位 的 值 ， 如 Line-height:21px 或 者 line-height:1.5em 
等 ， 此 处 em 是 一 个 相对 于 font-size 的 相对 单位 ， 因 此 ，1Line-height:1.5em 
最 终 的 计算 值 也 是 和 当前 font-size 相 乘 后 的 值 .例如 , 假设 我 们 此 时 的 font-size 
大 小 为 14px， 则 1ine-height 计算 值 是 1.5*14px=21px。 

乍 一 看 ， 人 似乎 Line-height:1.5、lLine-height:150s5 和 1Line-height:1.5em 这 3 种 

用 法 是 一 模 一 样 的 ,最终 的 行 高 大 小 都 是 和 font-size 计算 值 ,但 是 ,实际 上 ,1ine-height:1.5 
和 另外 两 个 有 一 点 儿 不 同 , 那 耽 是 继承 细节 有 上 所 差别 。 如 采 使 用 数值 作为 1ine-heigpht 的 属性 值 ， 
那么 所 有 的 子 元 系 继 承 的 都 是 这 个 值 ， 但 是 ， 如 采 使 用 百分比 值 或 者 长 度 值 作 为 属性 值 ， 那 么 所 有 
的 子 元 素 继承 的 是 最 终 的 计算 值 。 什 么 意思 呢 ? 比方 说 下 面 3 段 CSS 代码 : 
body { 
font-size: 14px; 


line-height: 1.5; 
} 









































body { 
font-size: 14px; 
line-height: 150%; 
} 


body { 
font-size: 14px; 
line-height: 1.5em; 
} 


对 于 <body> 元 素 而 言 ， 上 面 3 段 CSS 最 终 的 行 高 计算 值 是 21px 是 没有 任何 区 别 的 ， 但 是 ， 
如 果 同 时 还 有 子 元 素 ， 例 如 : 


h3, p { margin: 0 } 
h3 { font-size: 32px; } 
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p { font-size: 20px; } 

<h3> 标 题 </h3> 

< 内容 <7/6> 
结果 1ine-height:150gs5 和 1ine-height:1.5enm 的 最 终 表 现 是 “标题 ”文字 和 “内 容 ” 文 
字 重 有 在 了 一 起 ， 如 图 5-13 所 示 。 

俗话 讲 “ 没 有 对 比 就 没有 伤害 ”， 我 们 来 看 看 1ine-height :1.5 的 最 终 表 现 ， 排 版 令 人 
舒畅 ， 如 图 5-14 所 示 。 


图 $-13 ”文字 重 羞 图 5-14 ”文字 正常 排版 








眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/5/2-5.php 或 者 扫 右 侧 的 二 
维 码 。 

line-height:150% 和 line-height:1.5em 代码 下 的 文字 重 登 的 
原因 在 于 <n3> 和 <p> 元 素 继承 的 并 不 是 150% 或 者 1.5em， 而 是 <bodqy> 元 
素 的 1ine-height 计算 值 21px， 也 就 是 说 ，<h3> 和 <p> 元 素 的 行 高 都 是 
21px， 考 虑 到 <h3> 的 font-size 大 小 为 32px， 此 时 <h3> 的 半 行 间距 束 是 -5.5px， 因 而 “ 标 
题 ” 文 字 和 下 面 的 “内 容 ” 文 字 发 生 重 登 。 

但 是 Line-height:1.5 的 继承 则 不 同 ，<h3> 和 <p> 元 系 的 Line-heignt 继承 的 不 是 
计算 值 , 而 是 属性 值 1.5, 因此 , 对 于 <h3> 元 素 , 此 时 的 行 高 计算 值 是 1 .5*32px=48px, <p> 
元 素 的 行 高 计算 值 是 1 .5*20px=30px， 于 是 ， 间 距 合 理 ， 排 版 舒适 。 

实际 上 , line-height:150%$、line-height:1.5em 要 想 有 类 似 1ine-height:1.5 
的 继承 效果 ， 也 是 可 以 实现 的 ， 类 似 下 面 的 CSS 代码 : 

* 

line-height: 150%; 

} 

就 是 使 用 通配符 * 匹 配 所 有 的 元 素 。 有 人 可 能 会 疑问 : 既然 line=helight 数值 可 以 让 元 素 天 
然 继承 相对 计算 特性 ， 那 这 里 的 通配符 电 不 完全 没 必 要 ? 

其 实 非 也 ， 两 者 还 是 有 差别 的 。HTML 中 的 很 多 茶 换 元 系 ， 尤 其 表单 类 的 奏 换 元 素 ， 如 输入 框 、 
按钮 之 类 的 ， 很 多 具有 继承 特性 的 CSS 属性 其 自己 也 有 一 套 , 如 font-family、font-size 以 及 
这 里 的 line-height。 由 于 继承 是 属于 了 最 弱 的 权重 ， 因 此 body 中 设置 的 line-height 是 无 法 影 
啊 到 这 些 瞪 换 元 素 的 ， 但 是 * 作 为 一 个 选择 占 ， 束 不 一 样 了 ， 会 直接 重 置 这 些 殖 换 元 系 默 认 的 
line-height， 这 其 实 是 我 们 需要 的 ， 因 此 从 道义 上 讲 ， 使 用 * 通 配 也 是 合理 的 。 但 又 考虑 到 * 的 性 
能 以 及 明明 有 继承 却 不 好 好 利用 的 北 耻 感 ， 我 们 可 以 折 中 使 用 下 面 的 方法 : 


body { 
line-height: 1.5; 
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} 
input, button 1{ 
line-height: inherit; 


We 








说 这 么 多 其 实 还 是 为 了 解决 一 开始 的 问题 : Line-height 应 该 重 置 为 多 大 的 值 呢 ? 是 使 
用 数值 、 百 分 比值 还 是 长 度 值 呢 ? 

下 面 是 我 的 答案 : 如 果 我 们 做 的 是 一 个 重 图 文 内 容 展示 的 网 页 或 者 网 站 ， 如 博客 、 论 坛 、 
公众 号 之 类 的 ， 那 一 定 要 使 用 数值 作为 单位 ， 考 虑 到 文章 阅读 的 舒适 度 ，Line-height 值 可 
以 设置 在 1.6 一 1.8。 如 果 是 一 个 偶 重 布局 结构 精致 的 网 站 ， 则 在 我 看 来 使 用 长 度 值 或 者 数值 都 
是 可 以 的 ， 因 为 ， 第 一 ， 我 们 的 目的 是 为 了 兼容 ; 第 二 ， 无 论 使 用 哪 种 类 型 值 ， 都 存在 需要 局 
部 重 置 的 场景 。 不 过 , 根据 我 的 统计 , 基本 上 各 大 站 点 都 是 使 用 数值 作为 全 局 的 line-heignt 
值 。 不 过 ， 这 并 不 表示 使 用 数值 就 一 定 是 最 好 的 ， 如 果 网 站 内 容 的 样式 不 是 动态 不 可 控 的 ， 
有 了 时候， 固定 的 长 度 值 反 而 更 利于 精确 布局 。 因 此 ， 不 要 盲目 跟风 。 那 具体 设置 的 值 应 该 是 
多 大 呢 ? 

如 果 使 用 的 是 长 度 值 ， 我 建议 直接 1ine-height:20px， 排 版 时 候 计 算 很 方便 。 

如 果 随 大 流 使 用 的 是 数值 ， 我 建议 最 好 使 用 方便 计算 的 行 蜗 值 ， 一 种 是 line-heignt 属 
性 值 本 身 方便 计算 ， 男 一 种 是 1ine-height 的 默认 计算 值 方便 计算 。 比 方 说 ，1.3、1.4、1.5 
都 有 大 型 网 站 使 用 ， 我 们 天 不 妨 使 用 1 .5， 因 为 心算 1.4*16px 要 比 1.5*16px 难 多 了 ， 这 就 
是 第 一 种 “属性 值 本 里 方便 计算 ” 而 另外 一 种 “默认 计算 值 方便 计算 ”是 我 们 先 得 到 方便 计算 
的 InNe=HeLornt 计算 值 ， 然 后 倒 推 J ine=helrdght 应 该 使 用 的 数值 是 多 大 ， 例 如 20Dx 是 二 
非常 方便 的 计算 值 ， 如 果 <body> 上 默认 重 置 的 font-size 是 14px, 则 1ine-height 数值 应 该 
是 20px/14pxx1.4285714285714286 四 舍 五 入 的 结果 ， 于 是 得 到 : 















































body { 
line-height: 1.42857; 
font-size: 14px; 


} 
不 好 意思 ， 给 大 家 下 套子 了 。 注 意 ， 在 CSS 中 ， 计 算 行 高 的 时 候 ， 行 高 值 一 定 不 要 问 下 爹 
入 ， 而 要 问 上 舍 入 。 上 面 虽 然 14*1 .42857 计算 机 近乎 是 20px， 但 在 Chrome 浏览 器 下 ， 依 
然 以 19px 的 高 度 呈 现 ， 如 果 我 们 向 上 舍 入 取 1.42858， 则 最 终 所 有 浏览 器 行 高 计算 值 是 20px， 
代码 示意 如 下 : 
body { 
line-height: 1.42858; 


font-size: 14px; 


} 


5.2.4 内 联 元 素 line-height 的 “大 值 特性 ” 
理解 了 下 面 这 个 案例 ， 就 真正 理解 了 内 联 元 素 1ine-height。 因 此 ， 放 在 最 后 算是 对 
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1ine-height 的 总 结 和 知识 测验 吧 。 此 例子 HTML 都 是 一 样 的 : 


<div class="box"> 
<8pan》 内 和 容 ， </SDan> 
</div> 


CSS 代码 有 所 不 同 ， 分 别 为 


.DOX { 
line-height: 96px; 
| 
.box span { 
line-height: 20px; 
} 


和 


.box { 
line-height: 20px; 
} 
.box span { 
line-height: 96px; 
} 











也 就 是 一 个 子 元 素 行 高 是 20px， 一 个 是 96px， 假 如 文字 就 1 行 ，.box 元 素 的 高 度 分 别 是 多 少 ? 

按照 我 们 以 前 考试 做 选择 题 的 套路 ， 非 A 即 B: 按照 经 验 ， 子 元 素 行 高 覆盖 父 元 素 ， 应 该 
高 度 等 于 <span> 元 素 的 高 度 ， 分 别 是 20px、96px; 但 由 于 基本 功 不够 扎实 ， 并 不 确定 内 联 
元 素 是 否 文 持 1 ine- ee 如 果 不 支 持 , 那 应 该 跟着 .box 元 素 的 行 高 走 , 高 度 应 该 是 96px、 
20px。 忆 之 ， 肯 定 束 这 两 个 答案 之 间 ! 

好 ， 如 果 大 家 也 有 和 上 和 面 类 似 的 想法 ， 那 么 还 要 再 细 细 读 一 谈 前 面 的 内 容 。 正 确 的 答 
案 是 : 全 都 是 96px 高 ! 

还 不 信 ? 可 以 看 一 下 演示 示例 ， ee http://demo.cssworld.cn/5/2-6.php 或 者 扫 下 面 的 二 
维 码 。 效 果 如 图 5-15 所 示 《〈 截 自卫 浏览 器 























span: line-height:20px 


span: line-height:96px 








图 5-15 ” .box 元 素 的 高 度 均 是 96px 


也 就 是 说 : 无 论 内 联 元 系 1ine-height 如 何 设置 ， 最 终 父 级 元 素 的 高 度 都 是 由 数值 大 的 
那个 1ine-height 决定 的 ， 我 称 之 为 “内 联 元 素 Line-height 的 大 值 特性 ”。 
A 问 : 为 什么 会 这 样 ? 逻辑 上 讲 不 通 啊 ? 
首先 ， 要 明确 一 点 : 内 联 元 素 是 支持 line-height 的 <span> 元 素 上 的 line-height 
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也 确实 履 剖 了 .box 元 隶 ， 但 是 ， 在 内 联 盒 模型 中 ， 存 在 一 些 你 看 不 到 的 东西 ， 没 错 ， 就 是 多 
次 提 到 的 “幽灵 空 日 市 扩 ”。 

正好 再 次 《也 是 最 后 一 次 ) 温习 一 下 “内 联 盒 模型 ”的 知识 。 这 里 的 <span> 是 一 个 内 联 
元 系 ， 因 此 目 身 是 一 个 “和 内 联 盒子”， 本 例 就 这 一 个 “内 联 盒子 ”， 只 要 有 “内 联 盒子 ”在 ， 惑 
一 定 会 有 “ 行 框 盒子 ”就 是 每 一 行内 联 元 素 外 面包 里 的 一 层 strut" 
看 不 见 的 盒子 。 然 后 ， 重 点 来 了 ， 在 每 个 “ 行 框 盒子 ”前 面 有 














div class="box”> 











一 个 视 度 为 0 的 具有 该 元 素 的 字体 和 行 高 属性 的 看 不 见 的 “网 pe 

灵 空 日 节点 ”， 如 下 套用 本 案 ， 则 这 个 “ 师 录 空白 节操 ”不 在 

<span> 元 系 的 前 方 ， 如 图 5-16 所 示 。 图 5-16 “幽灵 空白 节点 ” (又 名 
于 是 ， 就 效果 而 言 ， 我 们 的 HTML 实际 上 等 同 于 : “Strut”) 标注 


<div class="box"> 
字 和 从 <span> 内 容 .. .</span> 

/dlYy> 

这 下 就 好 理解 了 ， 当 .pox 元素 设置 1ine-height:96px 时 ,“ 字 和 从 ”高 度 96px; 当 设 
置 1ine-height:20pPx 时 ，<span> 元 系 的 高 度 则 变 成 了 96px， 而 行 框 盒子 的 高 度 是 由 融 度 
最 高 的 那个 “内 联 盒子 ”决定 的 ， 这 就 是 .box 元 素 高 度 永远 都 是 最 大 的 那个 Line-height 
的 原因 。 

知道 了 原因 也 束 能 够 对 症 下 药 ， 要 避免 “ 幽 姑 空 日 方 点 ”的 干扰 ， 例 如 ， 设 置 <span> 元 
素 display:inline-block， 创 建 一 个 独立 的 “ 行 框 盒子”， 这 样 <span> 元 素 设 置 的 
line-height:20px 就 可 以 生效 了 ， 这 也 是 多 行文 字 垂直 居中 示例 中 这 么 设置 的 原因 。 























5.3 1Line-height 的 好 朋友 vertical-align 


终于 轮 到 Line-height 的 好 朋友 vertical-align 上 场 了 ， 为 什么 说 它们 是 好 朋友 
呢 ? 因为 凡是 Line-height 起 作用 的 地 方 vertical-align 也 一 定 起 作用 , 只 是 很 多 时 候 ， 
vertical-align 默默 地 在 背后 起 作用 ， 你 没有 感觉 到 而 已 。 

很 多 人 都 有 这 样 一 个 错误 的 认 知 ， 认 为 对 于 单行 文本 ， 只 要 行 高 设置 多 少 ， 其 占据 高 度 就 
是 多 少 。 比 方 说 ， 对 于 下 面 非 常 简 单 的 CSS 和 HTML 代码 : 


.box { line-height: 32px; } 











.box > span { font-size: 24px; |】 

<div class="box"> 
<span> 文 字 </Span> 

</div> 





.box 元 素 的 高 度 是 多 少 ? 

很 多 人 一 定 认 为 是 32px: 因为 没有 设置 height 等 属性 ,高度 就 由 Line-height 决定 ， 
与 font-size 无 天， 所 以 这 里 明 摊 看 最 终局 度 就 是 32px。 

但 是 事实 上 ， 高 度 并 不 是 32px， 而 是 要 大 那么 几 像素 〈 受 不 同 字体 影响 ， 增 加 高 度 也 不 
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一 样 ) 比方 说 36px,， 如 图 5-17 所 示 。 图 5-17 规 目 此 示例 页 面 : http://demo.cssworld.cn/5/3-1.php。 
这 里 , 之 所 以 最 终 .pox 元 素 的 高 度 并 不 等 于 Line-height， 残 

是 因为 行 高 的 朋友 属性 GetlLealsaJlidn 在 背后 默默 地 下 了 黑手 。 文本 
vertical-align 知识 点 比 Line-height 要 多 ， 我 们 现在 就 

来 一 点 一 点 地 揭 开 vertical-align 属性 的 层 层面 纱 le 0 
所 局 | 人 高 度 不 等 于 行 高 











5.3.1 vertical-align 家 族 基 本 认识 


抛 开 ijnherit 这 类 全 局 属性 值 不 谈 ， 我 把 vertical-align 属性 值 分 为 以 下 4 类: 

。 线 类 ， 如 paseline〔 默 认 值 )、top、middle、bottonm; 

。 文本 类 ， 如 text-top、text-bottom; 

。 上 标 下 标 类 ， 如 sub、super:; 

e。 数值 百分比 类 ， 如 20px、2em、20% 等 。 

实际 上 ， I 应 该 是 两 类 ， 分别 是 “数值 类 ”和 “百分比 类 ”这 里 之 所 以 把 
它们 合 在 一 起 归 为 一 类， 是 因为 它们 有 不 少 共性 ， 包 括 “都 市 数字 ”和 “行为 表现 一 致 ”。 

“都 带 数 字 ” 上 略 带 戏 庄 之 意 ， 没 什么 好 说 的 。“ 行 为 表现 一 至 ”表示 上 共有 相同 的 泻 染 规划， 具 
体 为 : 根据 计算 值 的 不 同 ， 相 对 于 基线 往 上 或 往 下 偏 移 ， 到 的 是 往 上 还 是 往 下 [| 
取决 于 vertical- align 的 计算 值 是 正 值 还 是 负 值 ， 如 果 是 负 值 ， 往 下 依 1 相 
移 ， 如 果 是 正 值 ， 往 上 偏 移 。 [eT 

为 了 更 好 地 演示 vertical-align 数值 类 属性 值 的 表现 ， 我 特意 做 了 Kk 
个 演示 页 面 ,手动 输入 http://demo.cssworld.cn/5/3-2.php 或 者 扫 右 侧 的 二 维 码 。 四 tic 

由 于 vertical-align 的 默认 值 是 baseline， 即 基线 对 齐 ， 下 

边缘 。 因 此 ， 内 联 元 素 默认 都 是 沿 着 字母 x 的 下 边缘 对 齐 的 。 对 于 图 厂 等 蔡 换 元 素 ， 往 往 使 
用 元 素 本 里 的 下 边缘 作为 基线 ， 因 此 ， 进 入 上 面 的 演示 页 面 ， 看 到 的 是 图 5-18 所 示 的 图 文 排列 
效果 。 

由 于 是 相对 字母 x 的 下 边缘 对 齐 ， 而 中 文 和 部 分 英文 字形 的 下 边缘 要 低 于 字母 x 的 下 边缘 ， 因 
此 , 会 给 人 感觉 文字 是 明显 偏 下 的 , 一 般 都 会 进行 调整 。 比 方 说 , 我 们 给 文字 内 容 设 置 vertical- 
align:10px， 则 文字 内 容 束 会 在 当前 基线 位 置 再 往 上 精确 偏 移 10px， 效 果 如 图 5-19 所 示 。 































字母 x 












文字 的 Vertical-align 值 : 10px 本 


母 X 
图 5-18 ”默认 的 图 文 对 齐 表 现 图 5-19 vertical-align:10px 偏 移 后 的 效果 


演示 页 面 ; 还 提供 了 很 多 寺 其 他 可 供 选 择 的 vertical=align 值 ， 经 过 一 釉 试 验 读 者 束 会 友 现 ， 
正如 上 和 耐 所 说 ， 负 值 全 部 都 是 往 下 偏 移 ， 正 值 全 部 都 是 往 上 偏 移 ， 而 且 数 值 大 小 全 部 都 是 相对 于 基 
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线 位 置 计 算 的 ,因此 , 从 这 一 点 来 看 ,vertical-align:baseline 等 同 于 vertical-align:0。 

说 到 这 里 ， 我 束 妨 不 住 多 说 两 句 。 很 多 即使 工作 很 多 年 的 前 闹 开 友人 员 ， 也 可 能 不 知 
道 vertical-align 的 属性 值 支持 数值 ， 更 不 知道 支持 负 值 ， 这 着 实 让 我 很 意外 。 如 果 
实用 性 差 那 还 好 理解 ， 关 键 是 vertical-align 的 数值 属性 值 在 实际 开发 的 时 候 实 用 性 
非常 强 。 

一 是 其 兼容 性 非常 好 。 在 之 前 ，vertical-align 属性 的 兼容 性 被 开发 人 员 诉 病 已 久 ， 
因为 需要 兼容 IE6 和 IE7 浏览 堪 ， 而 这 些 浏览 右 的 vertical-align 关键 字 属 性 值 〈 如 
middles text=top 等 ) 的 演 染 规则 和 其 他 浏览 器 大 相 径 寿 , 很 多 人 不 知道 何者 
还 可 以 使 用 数值 作为 属性 值 ， 结 果 CSS hack 满天飞 。 实 际 上 ，vertical-align 有 一 些 属性 
值 的 泻 染 一 直 部 很 羔 容 ， 一 个 是 默认 的 基线 对 章 ， 为 一 个 束 古 相对 于 基线 的 “数值 百分比 类 ” 
属性 值 偏 移 定位 。 也 就 是 说 ， 如 果 我 们 使 用 类 似 vertical-align:10px 这 样 的 定位 ， 是 不 
会 有 任何 兼容 性 问题 的 ， 也 不 需要 写 CSS hack。 

二 是 其 可 以 精确 控制 内 联 元 际 的 垂直 对 齐 位 置 。 VertiCal=aL1ion 属性 的 规范 和 统一 从 
IE8 浏览 器 开始 ， 由 于 我 们 现在 都 不 需要 兼容 IE8 以 前 的 浏览 器 ，middle、text-top 等 关键 
字 属 性 值 可 以 畅快 使 用 ， 但 是 这 些 关 键 字 有 一 个 严重 的 不 足 ， 就 是 垂直 对 齐 位 置 是 固定 的 ， 往 
往 最 后 并 不 是 我 们 想 要 的 像素 级 精确 对 齐 效果 ， 此 时 ， 还 是 需要 借助 “数值 百分比 类 ”属性 值 
才 可 以 。 

我 们 不 妨 看 一 个 简单 的 小 图 标 对 齐 的 例子 。 

假设 有 一 个 display 值 为 inline-block 的 尺寸 为 20 像素 x20 像素 的 小 图 标 ， 默 认 状 
态 下 ， 文 字 是 明显 偏 下 的 ， 类 似 图 5-20 中 “请 选择 ”三 个 字 和 后 面 三 角 图 形 的 位 置 关 系 。 

这 里 ， 我 们 需要 的 是 垂直 居中 对 齐 效 末 ， 所 以 很 多 人 都 使 用 具有 强烈 语义 的 vertical- 
align:middqle 控制 图 标的 垂直 位 置 ， 然 而 ， 由 于 middle 并 不 是 真正 意义 上 的 垂直 居中 ， 
此 还 是 会 有 像素 级 别 的 误差 ， 误 差 大 小 与 字体 和 字号 均 有 关 。 例 如 ， 在 本 例 中 ， 网 标 往 下 多 仿 
移 了 1 像素 而 导致 容器 的 可 视 高 度 变 成 了 21 像素 ， 如 图 5-21 所 示 。 

请 选择 请 选择 v 


图 5-20 ”文字 位 置 比 图 标 低 。 图 5-21 middle 属性 导致 过 多 偏 移 从 而 使 容器 尺寸 超出 预期 


但 是 ， 如 果 我 们 使 用 精确 的 数值 ， 则 一 切 尽 在 掌控 之 中 。 例 如 ,设置 vertical-align: 
-5px， 此 时 ， 图 标 和 文字 实现 了 真正 意义 上 的 垂直 居中 ， 此 时 容器 的 可 视 高 度 和 当前 行 高 20 
像 系 保持 了 一 致 ， 如 图 5-22 所 示 。 眼 见 为 实 ， 手 动 输入 http://demo.cssworld.cn/5/3-3.php 或 者 扫 下 
面 的 二 维 码 。 



























































请 选择 Y 


5-22 ”-5px 实现 的 完美 的 垂直 居中 
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说 完 “ 数 值 类 ”和 “百分比 类 ”属性 值 的 行为 表现 ， 下面 再 简单 说 说 平时 使 用 并 不 多 的 “ 百 
分 比 类 ”属性 值 。 

在 CSS 世界 中 ， 凡 是 百分比 值 ， 均 是 需要 一 个 相对 计算 的 值 ， 例如, margin 和 padding 
是 相对 于 宽度 计算 的 ，Line-height 是 相对 于 font-size 计算 的 ， 而 这 里 的 vertical- 
align 属性 的 百分比 值 则 是 相对 于 1ine-height 的 计算 值 计 算 的 。 可 见 ，CSS 世界 中 的 各 类 
属性 相互 间 有 着 紧 密 联 系 而 非 碧 立 的 个 体 。 

假充 某 元 系 的 Line-height 是 20px， 那 么 此 时 vertical-align:-25% 相 当 于 设置 
vertical-align:-5px。 按 照 之 前 学 到 的 知识 ,会 发 现 百分比 值 无 论 什么 时 候 都 很 实用 ， 因 
此 会 给 人 感觉 VE 的 百分比 属性 值 也 会 非常 实用 ， 但 是 事实 上 ， 平 时 开发 中 很 
少 使 用 。 原 因 在 于 ， 在 如 今 的 网 页 布局 中 ，Line-heignht 的 计算 值 都 是 相对 固定 并 且 已 知 的 ， 
因此 ， 直 接 使 用 具体 的 数值 反而 更 方便 。 比 方 说 上 面 小 图 标 对 齐 的 例子 ， 我 们 肯定 会 直接 
vetrtical-align:-5px， 而 不 会 使 用 vertical-align:-25%， 因 为 后 者 还 要 重新 计算 ， 
并 且 很 多 时 候 是 除 不 尽 的 ， 除 了 装 门面 以 外 ， 我 是 想不到 还 有 其 他 使 用 的 理由 了 。 

这 束 是 为 什么 “百分比 类 ”属性 值 “ 简 单 说 说 ”的 原因 了 。 


5.3.2 vertical-align 作用 的 角 提 


很 多 人 ， 尤 其 CSS 新 手 ， 会 问 这 么 一 个 问题 :“ 为 什么 我 设置 了 vertical-align 却 没 
任何 作用 ? ” 

因为 vertical-align 起 作用 是 有 前 提 条 件 的 ， 这 个 前 提 条 件 就 是 ， 只 能 应 用 于 内 联 元 
系 以 及 display 值 为 table-cell 的 元 系 。 

换 句 话说 ，vertical-align 属性 只 能 作用 在 display 计算 值 为 inline、inline- 
block, inline-table 或 taple-cell 的 元 素 上 。 因此 , 默认 情况 下 , <span>、<strong>、 
<em> 等 内 联 元 素 ，<img>、<button>、<input> 等 蔡 换 元 素 ， 非 HTML 规范 的 自 定义 标签 
元 素 ， 以 及 <tqd> 单 元 格 ， 都 是 支持 vertical-align 属性 的 ， 其 他 块 级 元 素 则 不 支持 。 

当然 ， 现 实 世 界 是 没有 这 么 简单 的 。CSS 世界 中 ， 有 一 些 CSS 属性 值 会 在 背后 默默 
地 改变 元 素 diSspLay 属性 的 计算 值 ， 从 而 导致 LEE 者 罚 不 起 作用 。 比 方 说 ， 
浮动 和 绝对 定位 会 让 元 素 块 状 化 ， 因 此 ， 下 面 的 代码 组 合 这 人 是 没有 理由 
出 现 的 : 

.example { 

ft 
vertical-align: middle; /* 没有 作用 */ 


} 


.example { 







































































position: absolute; 
vertical-align: middle; yx 没有 作用 *y 
} 


等 等 ， 我 好 像 听 到 有 人 说 :“ 不 是 vertical-align 没有 作用 ， 而 是 下 面 这 种 情况 。” 
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.DOX { 
height: 128px; 
} 
.box > img { 
height: 96px; 
vertical-align: middle; 
} 
<div class="box"> 
<img src="1 .jpg"> 
</div> 


此 时 图 片 项 着 .box 元 又 的 上 边缘 显示 ， 根 本 没 垂直 居中 ， 完 全 没 起 作用 ! 

这 种 情况 看 上 去 是 vertical-align:middle 没 起 作用 ， 实 际 上 ，vertical-align 
是 在 努力 地 演 染 的 ， 只 是 行 框 盒子 前 面 的 “幽灵 空白 节点 ”高 度 太 小 ， 如 果 我 们 通过 设置 一 个 
足够 大 的 行 高 让 “幽灵 衬 白 节点 ”高 度 足 够 ， 台 会 看 到 vertical-align:middle 起 作用 了 ， 
CSS 代码 如 下 : 


.box { 
height: 128px; 
line-height: 128px; /* 关键 Css 属性 */ 























| 

.box > img { 
height: 96px; 
vertical-align: middle; 


} 

等 等 ， 我 义 昕 到 有 人 说 :“ 为 什么 display:table-cell 却 可 以 无 视 行 高 ? ” 

告诉 你 ， 那 是 因为 对 table-cell 元 素 而 言 ，vertical-align 起 作用 的 是 table-cell 
元 又 目 晤 。 不 妨 看 下 面 一 段 代码 : 


.Cell { 
height: 128px; 
display: table-cell; 
| 
.Cell > img { 
height: 96px; 
vertical-align: middle; 
} 
<div class="cell"> 
<img src="1.jpg"> 
LG 


结果 疼 片 并 没有 要 垂直 居中 的 迹象 ， 还 是 紧 贴 看 父 元 素 的 上 边缘 ， 如 网 5-23 所 示 。 
但 是 ， 如 果 vertical-align:middle 是 设置 在 table-cell 元 素 上 ，CSS 代码 
如 下 : 


.Cell { 
height: 128px; 
display: table-cell; 








5.3 line-height 的 好 朋友 vertical-align 131 


vertical-align: middle; 
| 
.Cell > img { 

height: 96px; 
} 


那么 图 片 就 有 了 明显 的 变化 ， 如 图 5-24 所 示 。 





图 $-23 图片 的 vertical-align: 5-24 table-cell 元 于 vertical-align: 
middle 没有 效果 middle 有 效果 


所 以 ， 大 家 一 定 要 明确 ， 虽 然 束 效果 而 言 ，table-cell 元 素 设 置 vertical- ee 
和 直 对 齐 的 是 子 元 素 , 但 是 其 作用 的 并 不 是 子 元 系 , 而 是 table-cell 元 系 日 [ea] 
吴 。 就 算 table-cell 元 素 的 于 元 系 是 一 个 块 级 元 系 , 也 一 样 可 以 让 其 有 各 【人 Ha 
种 垂直 对 齐 表现 。 

table-cell 夷 直 对 齐 有 对 应 的 演示 由 而 ,手动 输入 http:/demo.cssworld.cn/ 
5/3-4.php 或 者 扫 右 侧 的 二 维 码 。 





















5.3.3 vertical-align 和 1Line-height 之 加 的 天 系 


vertical-align 和 1ine-height 之 间 的 关系 很 明确 ， 即 “朋友 ”关系 。 

最 明显 的 束 是 vertical=align 的 百分比 值 是 相对 于 ee 计算 的 ， 但 表面 所 
见 的 这 点 关系 实际 是 只 是 冰山 一 角 ， 实 际 古 只 要 出 现 内 联 元 素 ， 这 对 好 朋友 一 定 会 同时 出 现 。 

ee 给 高 度 不 等 于 行 高 的 例子 (http://demo.cssworld.cn/5/3-1.php) ? 这 天 
是 这 对 好 朋友 搞 的 欣 。 这 里 要 为 大 家 深入 讲解 一 下 为 什么 会 出 现 这 样 的 现象 。 站 和 完 ， 我 们 仔细 
看 一 下 相关 的 代码 : 


.box { line-height: 32px; } 
.box > span { font-size: 24px; |} 




















<div class="box"> 
pan> x /span 
</div> 


其 中 有 一 个 很 天 键 的 点 ， 那 就 是 24px 的 font-size 大 小 是 设置 在 <span> 元 素 上 的 ， 这 就 导 
致 了 外 部 <aQiv> 元 素 的 字体 大 小 和 <span> 元 素 有 较 大 出 入 。 

大 家 一 定 还 记得 图 5-16。 这 里 也 是 类 似 的 ，<span> 标 签 前 面 实际 上 有 一 个 看 不 见 的 类 似 
字符 的 “幽灵 空白 节点 ”。 看 不 见 的 东西 不 利于 理解 ， 因 此 我 们 不 妨 使 用 一 个 看 得 见 的 字符 x 
占 位 ， 同 时 “文字 ”后 面 也 添加 一 个 x， 便 于 看 出 基线 位 置 ， 于 是 就 有 如 下 HTML: 
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<div class="box"> 
<epan>X 字 x</dpan> 





</div> 
Lo 我 们 可 以 明显 看 到 两 处 大 小 完全 不 同 的 文字 。 一 处 是 字母 x 构成 了 一 个 “匿名 内 联 
例子” 男 一 处 是 “文字 x” 所 在 的 <span> 元 素 ， 构 成 了 一 个 “内 联合 子 ”。 由 于 都 受 line- 


height:32px 影响 因此 ， 这 两 个 “内 联 盒子 ”的 高 度 者 是 32px。 下 面 关键 的 来 了 ， 对 字符 
而 言 ，font-size 越 大 字符 的 基线 位 置 越 往 下 ， 因 为 文字 默认 全 部 都 是 基线 对 齐 ， 所 以 当 字 
号 大 小 不 一 样 的 两 个 文字 在 一 起 的 时 候 ， 彼 此 吉 会 发 生 上 下 人 位移， 如果 位 移 距 离 足够 大 ， 台 会 
超过 行 高 的 限制 ， 而 导致 出 现 意 料 之 外 的 高 度 ， 如 图 5-25 所 示 。 


| ss, roe, | Ba 文本 x 
度 侯 春 才 者 伐 性 王 
图 5-25 不同 字号 文字 高 度 超出 行 高 示意 
图 5-25 非常 直观 地 说 明了 为 何 最 后 容器 的 高 度 会 是 36px， 而 非 Line-height 设置 的 
3 
知道 了 问题 友 生 的 原因 , 那 问题 束 很 好 解决 了 。 我 们 可 以 让 “ 幽 姑 空 日 节点 ”和 后 面 <span> 
元 系 字 号 一 样 大 ， 也 就 是 : 


.box { 
line-height: 32px; 
































font-size: 24px; 
} 
.box > span { } 


或 者 改变 牌 直 对 齐 方式 ， 如 顶部 对 齐 ， 这 样 就 不 会 有 参差 位 移 了 : 


.box { line-height: 32px; } 
.box > span { 





font-size: 24px; 
vertical-align: top; 


} 

搞 清楚 了 大 小 字号 文字 的 高 度 问题 ， 对 更 为 常见 的 图 片 底部 留 有 间隙 的 问题 的 理解 就 容易 
多 了 。 现 象 是 这 样 的 ， 任 意 一 个 块 级 元 素 ， 里 面 若 有 图 片 ， 则 块 级 元 素 高 度 基本 上 都 要 比 图 片 
的 高 度 高 。 例 如 : 

.box { 


width: 280px; 


outline: lpx solid #aaa; 

















text-align: center; 
} 
.box > img { 

height: 96px; 
} 
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<div class="box"> 
<img src="1 .jpg"> 
</div> 


结果 .box 元 素 的 高 度 可 能 束 会 像 图 5-26 一 样 ， 底 部 平 白 无 故 多 了 5 像素 。 

则 际 产 生 的 三 大 元 凶 就 是 “幽灵 空白 节点 ”line-height 和 vertical-align 属性 。 
为 了 直观 演示 原理 ,我 们 可 以 在 图 片 前 面 辅助 一 个 字符 x 代 人 蔡 “ 幽 录 空 白 节 点 ”， 并 想 办 法 通过 
背景 色 显 示 其 行 高 范围 ， 于 是 ， 大 家 了 就 会 看 到 如 网 5-27 所 示 的 现象 。 




















人 


图 5-26 ”图 厂 乓 部 间 际 示意 图 5-27 图 厂 间 际 原理 示意 


7》 四 际 X 








当前 1 ine-height 计算 值 是 20px, 而 font-size 只 有 14px， 因 此 ， 字母 x 往 下 一 定 
有 至 少 3px 的 半 行 间距 (具体 大 小 与 字体 有 关 )， 而 图 片 作 为 蔡 换 元 素 其 基线 是 自 喘 的 下 边缘 。 
根据 定义 ， 默 认 和 基线 (也 就 是 这 里 字母 x 的 下 边缘 ) 对齐， 字母 x 往 下 的 行 高 产生 的 多 余 的 
间 隐 束 巡 视 到 图 片 下 面 ， 让 人 以 为 是 图 片 产生 的 间 际 ， 实 际 上 ， 是 “ 山 灵 空 白 节点 ”、 
line-height 和 vertical-align 属性 共同 作用 的 结果 。 

知道 了 原理 ， 要 清除 该 间隙 ， 束 知道 如 何 对 症 下 药 了 。 方 法 很 多 ， 具 体 如 下 。 

(1) 图 片 块 状 化 。 可 以 一 口气 干 择 “ 幽 灵 空 白 节 点 ”人 Line-height 和 vertical- 
llioiis 

(2) 容器 ]ine-height 足够 小 。 只 要 半 行 间距 小 到 字母 x 的 下 边缘 位 置 或 者 再 往 上 ， 自 
然 束 没有 了 撑 开 底部 间 际 高 度 空间 了 。 比 方 说 ， 容 器 设置 line-height:0。 

(3) 容器 font-size 足够 小 。 此 方法 要 想 生 效 ， 需 要 容器 的 1ine-height 属性 值 和 当 
前 font-size 相关 ,如 1line-height:1.5 或 者 1ine-height:150$ 之 类 ; 否则 只 会 让 下 
面 的 间 际 变 得 更 大 ， 因 为 基线 位 置 因 字 符 x 变 小 而 往 上 升 了 。 

(4) 图 片 设置 其 他 vertical-align 属性 值 。 则 际 的 产生 原因 之 一 就 [=] 
是 基线 对 齐 ， 所 以 我 们 设置 vertical-align 的 值 为 top、middle、 。 
bottom 中 的 任意 一 个 都 是 可 以 的 。 

以 上 所 有 方法 在 演示 页 面 中 均 有 对 应 的 效果 展示 ， 手 动 输入 http:/ 
demo.cssworld.cn/5/3-5.php 或 者 扫 右 侧 的 二 维 码 。 

在 4.3.5 节 最 后 提 到 了 一 个 “内 联 特性 导致 的 margin 无 效 ” 的 案例 ， 代 码 如 下 : 


<div class="box"> 





















































<img src="mml .jpg"> 
</div> 
.box > img { 

height: 96px; 
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margin-top: -200px; 
} 


此 时 ， 按 照 理 解 ，-200px 远 远 超过 图 片 的 高 度 ， 图 片 应 该 完全 跑 到 容器 的 外 面 ， 但 是 ， 
图 片 依然 有 部 分 在 .pox 元 素 中 ， 而 且 就 算 margin-top 设置 成 -99999px， 图 片 也 不 会 继续 
往 上 移动 ， 完 全 失效 。 其 原理 和 上 和 面 图片 底部 留 有 间隙 实际 上 是 一 样 的 ， 图 片 的 前 面 有 个 “ 山 
灵 空 日 胡 点 ”， 而 在 CSS 世界 中 ， 非 主动 触 友 位 移 的 内 联 元 系 古 不 可 能 跑 到 计算 容 问 外 面 的 ， 
导致 图 片 的 位 置 被 “幽灵 空白 节点 ”的 vertical-aligqn:baseline 给 限 死 了 。 我 们 不 妨 把 


看 不 见 的 “幽灵 空白 节点 ”使 用 字符 x 代替 ， 
原因 就 一 目 了 然 了 ， 如 图 5-28 所 示 。 2 


因为 字符 x 下 边缘 和 图 片 下 边缘 对 齐 , 字 
从 x 非 主动 定 位 ,不 可 能 跑 到 容 右 外面， 所 以 
图 片 就 被 限 死 在 此 问题 ，margin_top 失效 。 5-28 vertical-align 导致 margin 负 值 无 效 

最 后 ， 我 们 再 看 一 个 更 为 复杂 的 示例 。text-align:jusitfy 声明 可 以 帮助 我 们 实现 兼 
容 的 列表 两 端 对 齐 效果 ,但 是 text-align:jusitfy 两 端 对 齐 需 要 内 容 超 过 一 行 ， 同 时 为 了 
让 任意 个 数 的 列表 最 后 一 行 也 是 左 对 齐 排列 ， 我 们 需要 在 列表 最 后 辅助 和 列表 宽度 一 样 的 空 标 
签 元 素来 占 位 ， 类 似 下 面 HTML 代码 的 <i> 标 签 : 

.box { 

text-align: justify; 


} 
.Justify-fix 1{ 























”rp ZY 





display: inline-block; 
width: 96px; 
} 


<div class="box"> 





<img src="1 .jpg" width="96"> 
<img src="1 .jpg" width="96"> 
<img src="1 .jpg" width="96"> 
<img src="1 .jpg" width="96"> 
<i class="justify-fix"></i> 
<i class="justify-fix"></i> 
<i class="justify-fix"></i> 
he 











空 的 inline-block 元 素 的 局 上 度 是 0， 按 照 通 第 的 理解 ， 下 面 应 该 是 一 马 平川 ， 结 果 却 
有 非常 大 的 空 际 存在 ， 如 图 5-29 所 示 。 

为 了 便于 大 家 看 个 究竟 ， 我 把 占 位 <i > 元素 的 outline 属性 用 虚 外 框 标示 一 下 ， 此 时 效 
果 如 图 5-30 所 示 。 

结果 发 现 ， 上 面 巨 大 的 空隙 是 由 占 位 <i> 元 素 上 面 和 下 面 的 间隙 共同 组 成 的 。 

于 是 ， 问 题 来 了 : 上 面 的 间 隐 是 如 何 产生 的 ? 下 面 的 间 隐 是 如 何 产生 的 ? 如 有 果 去 除 这 些 间 
际 呢 ? 

很 多 时 候 ， 复 杂 问 题 是 由 简单 问题 组 合 而 成 的 。 实 际 上 ， 这 里 的 间 际 现象 和 上面 的 图 片 间 
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隐现 象 本 质 一 样 ， 都 是 vertical-align 和 1ine-height 共同 作用 的 结果 。 


4 


Pe 












图 5-29 ”列表 下 面 留 有 巨大 的 间 阶 5-30” 占 位 的 <i> 元 素 位 置 示意 
按照 之 前 解决 问题 的 方法 ， 我 们 可 以 直接 给 .box 元 素来 个 1ine-heignt:0 解决 垂直 间 


阶 问 题 ， 结 果 ， 这 样 设置 之 后 的 效果 却 如 图 5-31 所 想 : > 


示 。 图 片 和 图 片 乙 则 的 间 隐 是 没有 了 ， 但 是 图 片 和 





最 后 的 占 位 元 际 之 间 依 然 有 几 像素 的 间距 ,真有 些 
让 人 抓 狂 了 。 这 究竟 是 为 什么 ? 

简单 现象 的 背后 往往 有 大 的 学 问 , 要 明白 其 原 
因 ， 就 需要 说 到 inline-block 元 素 和 基线 图 5-31 line-heignt:0 去 除 间 隙 的 效果 图 
baseline 之 间 的 一 些 纠缠 的 关系 。 


5.3.4 深入 理解 vertical-align 线性 类 属性 值 


1. inline-block 与 baseline 
vertical-align 属性 的 默认 值 paseline 在 文本 之 类 的 内 联 元 素 那 里 就 是 字符 x 的 下 
边缘 ， 对 于 蔡 换 元 素 则 是 伏 换 元 陛 的 下 边缘 。 但 是 ， 如 末 是 inline-block 元 素 ， 则 规则 要 
复杂 了 : 一 个 inline-pbplock ve 如 果 里 面 没 有 内 联 元 素 ， 或 者 OVverfloW 不 久 Vigipbles 
则 该 元 素 的 基线 就 是 其 margin 底 边 缘 ; 否则 其 基线 就 是 元 素 里 面 最 后 一 行内 联 元 素 的 基线 。 
还 是 没有 反应 过 来 ? 那 看 下 和 面 这 个 例子 ， 应 该 束 能 知道 什么 意思 了 。 
两 个 同 尺 十 的 inline-pblock 水 平 元 素 ， 唯 一 区 别 就 是 一 个 是 空 的 ， 一 个 里 面 有 字符， 
代码 如 下 : 
iD=Daselines 1 
display: inline-block; 
width: 150px; height: 150px; 
border: lpx solid #cad5eb; 


background-color: #f0f3f9; 


} 
<span class="dib-baseline"></span> 

















<span class="dib-baseline">x-baseline</span> 


结果 如 图 5-32 所 示 。 
你 会 发 现 ， 明 明 尺 寸 、 display 水 平 都 是 一 样 的 ， 结 果 两 个 却 不 在 一 个 水 平 线 上 对 齐 , 为 
什么 昵 ? 上 面 的 规范 已 经 说 明了 一 切 。 第 一 个 框 里 面 没 有 内 联 元 素 ， 因 此 基线 就 是 容器 的 
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margin 下 边缘 ， 也 就 是 下 边框 下 面 的 位 置 ， 而 第 二 个 框 里 面 有 字符 ， 纯 正 的 内 联 元 素 ， 因 此 
第 二 个 框 就 是 这 些 字符 的 基线 ， 也 就 是 字母 x 的 下 边缘 了 。 于 是 ， 我 们 就 看 到 了 左边 框框 下 边 
缘 和 右边 框框 里 面 字符 x 底 边 对 齐 的 好 戏 。 

下 面 我 们 要 做 一 件 很 有 必要 的 事情 ， 来 帮助 我 们 理解 上 面 这 个 复杂 的 例子 在 line-height 
值 为 0 后 的 表现 。 什 么 事情 呢 ? 同 情境 模拟 ， 我 们 也 设置 右边 框 的 Line-height 值 为 0， 于 
是 ， 就 有 所 图 5-33 所 示 的 表现 。 





: x-baseline 
x-baseline 



































图 5-32 相同 display 计 算 值 相同 尺寸 却 不 对 齐 图 5-33” 右 侧 设置 1ine-height:0 后 的 对 齐 表现 
因为 字符 实际 占据 的 高 度 是 由 Line-height 决定 的 ， 当 Line-height 变 成 0 的 时 候 ， 

字符 占据 的 高 度 也 是 0， 此 时 ， 高 度 的 起 始 位 置 束 

变 成 了 字符 内 容 区 域 的 垂直 中 心 位 置 , 于 是 文字 就 3 i 

有 一 半 沙 在 框 的 外 面 了 。 由 于 文字 字符 上 移 了 ， 目 

然 基 线 位 置 〈 字 母 x 的 底 边 缘 ) 也 往 上 移动 了 ， 于 

是 两 个 框 的 垂直 沙 闫 就 更 大 了 。 

明白 了 这 个 简单 例子 , 也 就 能 明白 上 和 面 的 两 端 5-34 1line-height:0 同时 添加 
对 齐 的 复杂 例子 。 紧 接着 上 面 的 复杂 例子 ， 如 果 我 ee 
们 在 最 后 一 个 占 位 的 <i> 元 素 后 面 新 增 同样 的 x-baseline 字符 ， 则 结果 如 图 5-34 所 示 。 

这 样 大 家 是 不 是 就 可 以 明日 为 何 <i> 元 素 上 面 还 有 一 点 间 隐 了 了? 

后 然 还 有 人 级 眉头 ? 那 我 再 用 文字 解释 下 : 现在 行 高 line-height 是 0， 则 字符 
x-baseline 行 间距 就 是 -1em， 也 就 是 高 度 为 0， 由 于 CSS 世界 中 的 行 间距 是 上 下 等 分 的 ， 
因此 ， 此 时 字符 x-baseline 的 对 齐 点 就 是 当前 内 容 区 域 《 可 以 看 成 文字 选中 背景 区 域 ， 如 图 
5-35 所 示 ， 截 自 Firefox 浏览 器 ) 的 尉 直 中 心 位 置 。 由 于 图 5-34 中 的 x-baseline 使 用 的 是 微 
软 雅 黑 字 体 ， 字 形 下 沉 明 显 ， 因 此 ， 内 容 区 域 的 垂直 中 心 位 置 大 约 在 字符 x 的 上 面 1/4 处 ， 而 
这 个 位 置 束 是 字符 x-pbaseline 和 最 后 一 行 图 片 下 边缘 交汇 的 地 方 。 

理解 了 x-baseline 的 牌 直 位 置 表 现 ， 间 隐 问 题 残 很 好 理解 了 。 由 于 前 面 的 <1i class= 
"justify-fix"></i> 是 一 个 inline-block 的 空 元 素 ,， 因 此 基线 就 是 自身 的 底部 ， 于 是 下 
移 了 差不多 3/4 个 x 的 癌 度 ， 这 个 下 移 的 高 度 就 是 上 面 产生 的 间 隐 高 度 。 

好 了 , 一旦 知道 了 现象 的 本 质 ， 我们 就 能 轻松 对 症 下 药 了 ! 要 么 改变 占 位 <i> 元 素 的 基线 ， 
要 么 改造 “幽灵 空白 节点 ”的 基线 位 置 ， 要 么 使 用 其 他 vertical-align 对 齐 方式 。 

首先 来 个 最 有 意思 的 方法 ， 即 改变 占 位 <i> 元 素 的 基线 。 这 个 很 简单 ， 只 要 在 空 的 <i> 元 
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素 里 面 随便 放 几 个 字符 就 可 以 了 。 例 如 ， 塞 一 个 空格 &nbsp: 


.box { 
text-align: justify; 
line-height: 0; 
} 
<div class="box"> 
<img src="1 .jpg" width="96"> 
<img src="1 .jpg" width="96"> 
<img src="1 .jpg" width="96"> 
<img src="1 .jpg" width="96"> 
<i class="justify-fix">&nbsp;</i> 
<i class="justify-fix">&nbsp;</i> 
<i class="justify-fix">&nbsp;</i> 
“</div> 


这 时 会 发 现 间隙 没有 了 ! 为 什么 昵 ? 因为 此 时 <1> 元 素 的 基线 是 里 面 字 符 的 基线 ， 此 基线 
也 正好 和 外 面 的 “幽灵 空白 节点 ”的 基线 位 置 一 致 ， 没 有 了 错位 ， 自 然 就 不 会 有 间隙 啦 ! 效果 
如 图 $-36 所 示 。 









凋 成 cortert area 


rer 





235 XDaseline 全 Content drea 不 党 5-36 ”字符 去 除 间 际 





改造 “幽灵 空白 节点 ”的 基线 位 置 可 以 使 用 font-size， 当 字体 足够 小 时 ， 基 线 和 中 线 
会 重合 在 一 起 。 什 么 时 候 字 体 足 够 小 呢 ? 就 是 0。 于 是 ， 如 下 CSS 代码 (line-heignt 如 果 
是 相对 font-size 的 属性 值 ，Line-height:0 也 可 以 省 挥 ): 
.box { 
text-align: justify; 


font-size: 0); 


} 


效果 如 图 5-37 所 示 。 

看 上 去 好 像 效 果 类 似 ， 都 是 没有 间 隐 ， 但 是 
font-size:0 下 的 各 类 对 齐 效果 都 更 彻 展 。 

使 用 其 他 vertical-align 对 齐 方 式 束 是 让 
<i1> 人 TR vertical=alioqnitop/Bottonmr>, 
当前 ， 前 提 还 是 先 让 容器 1 ine-height :0， 例 如 : 





5-37 ”font-size:0 云 除 间 院 


.box { 
text-align: justify; 
line-height: 0; 
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} 
.Justify-fix { 

VELEITIOaL=al10n. Bottom, 7*» top: tidqdleWh 避 以 xy 
} 


关于 此 复杂 架 例 有 对 应 的 原型 示意 ， 手 动 输入 http://demo.cssworld.cn/ 
5/3-6.php 或 者 扫 右 侧 的 二 维 码 。 

准确 了 解 inline-plock 与 baseline 之 间 多 变 的 关系 ， 除 了 便于 理 
解 一 些 令 人 抓 狂 的 现象 外 ， 还 可 以 专门 利用 其 来 简化 我 们 的 开发 ， 比 方 说 一 
直 很 头疼 的 背景 小 图 标 和 文字 对 齐 的 问题 。 我 这 里 再 给 大 家 介绍 一 个 国 ] 
vertical-align 负 值 以 外 的 其 他 处 理 技巧 。 

例如 ， 要 删除 一 个 小 图 标 ， 通 第 的 做 法 无 非 是 下 面 两 种 : 

<i class="icon-delete"></i> 删除 
或 者 直接 一 个 按钮 图 标 ， 里 面包 含 文 本 内 容 ， 保 证 可 访问 性 : 

<i class="icon-delete"> 删 除 </i> 

而 以 上 两 种 实现 基本 上 图 标 元 系 的 基线 都 是 元 素 的 下 边缘 ， 之 前 讲 过 inline-block 元 
素 的 基线 规则 ; 一 个 inline-block 元 素 ， 如 果 里 面 没 有 内 联 元 素 ， 或 者 overflow 不 是 
visible， 则 该 元 系 的 其 线束 是 其 margin 撒 边 缘 。 

上 面 的 第 一 种 做 法 中 ，<i class="icon-delete"></i> 是 一 个 空 标签 ， 里 面 无 内 联 元 
系 ， 因 此 ， 基 线 是 底 边 缘 ， 而 第 二 种 做 法 中 ， 虽 然 里 面 有 文字 ， 但 是 此 文字 是 不 显示 的 ， 因 此 
开 友 者 习惯 设置 overflow:hidden, 这 义 叶 致 基线 是 的 边缘 ,而 正 古 由 于 基线 是 元 系 抵 边 毕 ， 
才 导 致 图 标 和 文字 默认 严重 不 对 齐 ! 但 是 ， 我 们 不 妨 反 过 来 试想 下 ， 如 果 图 标 和 后 面 的 文字 闹 
度 一 怪 ， 同 时 图 标的 基线 和 文字 基线 一 样 ， 那 岂 不 是 图 标 和 文字 天 然 对 齐 ， 根 本 就 不 需要 
margin 或 vertical-align 的 焉 直 偏 移 了 ? 

完全 可 行 , 这 里 分 享 一 下 我 总 结 的 一 套 基 于 20px 图 标 对 齐 的 处 理 技巧 , 该 技巧 有 下 面 3 个 要 点 。 

(1) 图 标高 度 和 当前 行 高 都 是 20px。 很 多 小 图 标 背 景 合 并 工具 都 是 图 标 宽 高 多 大 生成 的 
CSS 宽 高 束 是 多 大 ， 这 其 实 并 不 利于 形成 可 以 整 站 通用 的 CSS 策略 ， 我 的 建议 是 图 标 原 图 先 扩 
展 成 统一 规格 ， 比 方 说 这 里 的 20pxx20px， 然 后 再 进行 合并 ， 可 以 节约 大 量 CSS 以 及 对 每 个 
图 标 对 齐 进行 不 同 处 理 的 开发 成 本 。 

(2) 图 标 标 签 里 面 永远 有 字符 。 这 个 可 以 借助 :pefore 或 :after 伪 元 素 生 成 一 个 空格 字 
从 轻松 搞定 。 

(3) 图 标 CSS 不 使 用 overflow:hidden 保证 基线 为 里 面 字 符 的 基线 ， 但 是 要 让 里 面 潜 
在 的 字符 不 可 见 。 

于 是 ， 最 终 形 成 的 最 佳 图 标 实 践 CSS 如 下 : 


.jcon { 





















































display: inline-block; 
width: 20px; height: 20px; 
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background: url (sprite.png) no-repeat; 
white-space: nowrap; 


letter-spacing: -lem; 





text-indent: -999em; 
} 
.licon:before { 
content: '\3000', 
} 
A* .此 体 图 杯 二 7 
.lcon—xxx 1 
background-position: 0 -20px; 
} 


现在 , 我 们 套用 这 里 的 20px 处 理 的 策略 ,看 看 上 面 两 种 删除 小 图 标 处 理 的 对 齐 效果 如 何 ， 
手动 输入 http://demo.cssworld.cn/5/3-7.php 或 者 扫 下 和 面 的 三 维 码 。 对 齐 效果 如 图 5-38 所 示 ( 手 机 
截屏 王 辑 )。 





1. 空 标签 后 面 跟 随 文本 


删除 


2. 标签 里 面 有 "删除 "文本 而 随便 什么 文字 
闸 随便 什么 文字 











图 5-38 ”基于 内 联 基 线 的 小 图 标 对齐 效 果 截 图 

可 以 看 到 ， 小 图 标 和 文字 对 齐 完全 不 受 font-size 大 小 的 影响 。 可 以 说 ， 整 个 网 站 所 有 
小 图 标的 对 齐 问 题 都 可 以 解决 了 ， 节 省 了 大 量 CSS 代码 ， 降 低 了 大 量 开 发 和 维护 成 本 ， 是 个 好 
处 非常 明显 的 处 理 技巧 。 

最 后 有 必要 说 明 一 下 ， 这 里 20px 只 是 一 种 经 验 取 值 ， 因 为 目前 的 第 见 站 点 的 字号 和 行 间 
距 比 较 合 乎 这 个 大 小 。 如 采 你 的 项 目 设计 很 大 气 ， 字 号 默认 都 是 16px， 那 么 图 标 规格 和 默认 
行 写 可 能 24px 会 更 合适 一 点 。 

2. 了解 vertialL-align:top/bottom 

vertial=-aliqn tor lvertigl-alion:bpotton 基本 表 珊 关 似 ， 只 是 一 个 ”由 ”一 
个 “下 ”， 因此 合 在 一 起 讲 。 

顾名思义 ，vertial-align:top 了 束 是 重 下 上 边缘 对 齐 ， 有 具体 定义 如 下 。 

。 内 联 元 素 : 元 素 底 部 和 当前 行 框 盒子 的 顶部 对 齐 。 

e。 table-cell 元素: 元 素 底 padding 边缘 和 表格 行 的 顶部 对 齐 。 

用 更 通俗 的 话 解 释 就 是 : 如 果 是 内 联 元 了 系 ， 则 和 这 一 行 位 置 最 高 的 内 联 元 了 系 的 顶部 对 齐 ; 
如 果 display 计算 值 是 table-cell 的 元 素 ， 我 们 不 妨 脑 补 成 <td> 元 素 ， 则 和 <tr> 元 素 上 
边缘 对 齐 。 

vertial-align:bottom 声明 与 此 类 似 ， 只 是 把 “顶部 ” 换 成 “ 展 部 ” 把 “上 边缘 ” 
换 成 “下 边缘 ”。 
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需要 注意 的 是 ， 内 联 元 素 的 上 下 边缘 对 齐 的 这 个 “边缘 ”是 当前 “ 行 框 盒子 ”的 上 下 边缘 ， 
并 不 是 块 状 容 右 的 上 下 边缘 。 

vertial-align 属性 中 的 top 和 pbottom 值 可 以 说 是 最 容易 理解 的 vertial-align 
属性 值 了 ， 并 且 表 现 相 当 稳 定 ， 不 会 出 现 难 以 理解 的 现象 ， 在 实际 开发 的 时 候 也 相当 第 用 。 

末了 ， 出 个 小 题 测试 下 大 家 : 已 知 一 个 <dqiv> 元 素 中 有 两 张 图 片 ， 其 中 后 面 一 张 图 片 设 置 
了 vertial-align:bottom, 请问 这 两 张 岁 片 的 底 边 缘 是 
对 齐 的 吗 ? 

答案 : 不 是 不 对 齐 的 。 因 为 图 片 所 在 行 框 盒子 的 最 低 点 
是 “幽灵 至 白 节点 ”的 底部 ， 所 以 最 后 的 表现 会 如 图 5-39 
所 示 。 

3. vertialL-align:middle 与 近似 垂直 居中 

在 5.2 节 已 提 到 ，1line-height 和 vertial-align: middle 实现 的 多 行文 本 或 者 图 片 
的 垂直 居中 全 部 都 是 “近似 垂直 居中 ” 原因 与 vertial- align:middle 的 定义 有 关 。 

。 ”内 联 元 素 : 元 素 的 垂直 中 心 点 和 行 框 盒 子 基 线 往 上 1/2 x-height 处 对 齐 。 

。 table-cell 元 素 : 单元 格 填充 盒子 相对 于 外 面 的 表格 行 居中 对 齐 。 

table-cell 元 素 的 vertial-align:middle 中 规 中 定 ， 没 什么 好 说 的 ， 倒 是 内 联 元 
系 的 vertial-align:middqle 有 很 多 说 不 完 的 故事 。 定 义 中 “基线 往 上 1/2 x-height 处 ” 
指 的 就 是 miqdgdle 的 位 置 ， 仔 细 品 味 一 下 ,“ 基 线 ” 就 是 字符 x 底 边 缘 ， 而 x-height 就 是 字 
从 x 的 高 度 。 考 虑 到 大 部 分 字体 的 字符 x 上 下 是 等 分 的 ， 因 此 ， 从 “基线 往 上 L/2x-height 
处 ”我 们 就 可 以 看 出 是 字符 x 中 心 交 又 点 的 位 置 。 换 句 话 说 就 是 ，vertial-align:middle 
可 以 让 内 联 元 素 的 真正 意义 上 的 垂直 中 心 位 置 和 字符 x 的 交叉 点 对 齐 。 

基本 上 所 有 的 字体 中 ， 字 符 x 的 位 置 都 是 偏 下 一 点 儿 的 ，font-size 越 大 偏 移 越 明 显 ， 
这 才 导 致 默认 状态 下 的 VertL1idadl=align madadle 实现 的 都 是 “近似 垂直 居中 ?”。 

为 了 更 直观 地 表示 上 上面 的 解释 ， 我 特意 做 了 个 演示 页 面 ， 手 动 输入 http://demo.cssworld.cn/5/3- 
8.php 或 者 扫 下 面 的 二 维 码 。 演 示 页 面 有 两 条 水 平 线 ， 其中， 图 片上 线 显 示 的 是 图 片 垂直 中 心 位 
置 ， 而 人 贯 容 整 个 容 占 的 线 就 是 容器 的 王 直 中 心 位 置 ， 可 以 看 到 ， 上 默认 状态 下 ， 两 根 线束 不 在 一 
个 水 平 线 上 ， 如 图 5-40 所 示 。 

















图 5-39 两 张 图 片 底部 不 对 章 





















































图 $-40 ”两 条 垂直 中 心 线 示 意 

因为 图 片上 的 那 根 线 趋 癌 于 和 字符 x 的 中 心 靠 近 ， 而 不 是 容器 的 垂直 中 心 。 如 果 我 们 把 
font-size 改 大 如 48px， 则 效果 更 加 明显 ， 如 图 5-41 所 示 。 

如 果 想 要 实现 真正 意义 上 的 垂直 居中 对 齐 ， 只 要 想 办 法 让 字符 x 的 中 心 位 置 就 是 容 右 的 季 
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直 中 心 位置 即 可 ， 通 常 的 做 法 是 设置 font-size:0， 整 个 字符 x 缩小 成 了 一 个 看 不 见 的 点 ， 
根据 1ine-height 的 半 行 间距 上 下 等 分 规则 , 这 个 点 就 正 
好 是 整个 容器 的 垂直 中 心 位 置 , 这 样 束 可 以 实现 真正 意义 上 
的 垂直 居中 对 齐 了 。 

不 过 话 又 说 回来 ， 平 第 我 们 开发 的 时 候 ，font-size 
可 能 就 12px 或 14px， 昌 然 最 终 的 效果 是 “近似 垂直 居中 ”*”， 图 $-41 大 字号 下 两 条 垂直 中 心 线 距 
但 偏 共 也 束 1px 一 2px 的 样子 ， 普 通用 户 Sta ne 离 更 明显 
其 中 的 差异 的 ， 因此 ,是 否 非 要 真正 意义 上 季 直 居中 ,还 是 要 根据 项 目的 实现 情况 权衡 做 出 决策 


5.3.5 深入 理解 vertical-align 文本 类 属性 值 


文本 类 属性 值 指 的 束 是 text-top 和 text-pottom， 和 定义 如 下 。 

。 vertical-align:text-top: 盒子 的 顶部 和 父 级 内 容 区 域 的 顶部 对 齐 。 

e。 vertical-align:text-bottom: 盒子 的 底部 和 父 级 内 容 区 域 的 谨 部 对 齐 。 

其 中 ， 理 解 的 难点 在 于 “ 父 级 内 容 区 域 ” 这 是 个 什么 东西 呢 ? 

内 容 区 域 从 3.4.2 六 开始 就 有 多 侈 提 及 ， 在 本 书 中 ， 其 可 以 看 成 是 Firefox/IE 浏览 夯 文 本 选中 
的 背景 区 域 , 或 者 默认 状态 下 的 内 联 文 本 的 背景 色 区 域 。 而 所 请 “ 父 级 内 容 区 域 ” 指 的 就 是 在 父 级 
元 系 当 前 font-size 和 font-family 下 应 有 的 内 容 区 域 大 小 。 

因此 , 这 个 定义 又 可 以 理解 为 (以 text-top 举例 ): 假设 元 素 后 面 有 一 个 和 父 元 系 font- 
size、font-family 一 模 一 样 的 文字 内 容 , 则 vertical-align:text-top 表示 元 素 和 这 
个 文字 的 内 容 区 域 的 上 边缘 对 齐 。 

我 特意 制作 了 一 个 很 直观 的 演示 页 面 来 示意 text-top 和 text-bottom [a] ry 2 
属性 值 的 样式 表现 ， 手 动 输入 http:/demo.cssworld.cn/5/3-9.php 或 者 扫 右 侧 的 二 维 【HP 二 
人 码 。 此 演示 页 面 有 3 个 不 同 font-size， 分 别 是 16px、24px 和 32px。 父 
元 系 默 认 是 16px, 我 们 可 以 清晰 地 看 到 图 片 的 上 边缘 和 16px 文字 的 内 容 区 
域 的 上 边缘 对 齐 了 ， 如 图 5-42 所 示 。 点 击 其 他 单 选 按钮 ， 改 变 父 级 元 素 的 
font-size 大 小 ， 如 24px， 了 束 会 看 到 网 片上 边缘 〈 对 齐 线 ) 和 24px 字号 大 小 的 文字 的 内 容 
区 域 的 上 边缘 对 齐 了 ， 如 疼 5-43 所 示 。 






















































设置 父 级 font-size 大 小 : 
®) 16px 24px 32px 


设置 父 级 font-size 大 小 : 
16px  (®) 24px 32px 


1. vertical-atign:text-top 1. vertical-align:text: 





图 5-42 ”图 片上 边缘 和 16px 文字 的 图 5-43 ”图 片上 边缘 和 24px 文字 的 
内 容 区 域 的 上 边缘 对 齐 内 容 区 域 的 上 边缘 对 齐 
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好 了 ， 现 在 我 们 深入 理解 了 文本 类 属性 值 的 表现 规则， 这 对 我 们 实际 开发 有 什么 用 呢 ? 我 
这 里 郑重 地 告诉 大 家 : 没有 任何 作用 。 准 确 地 讲 ， 应 该 是 其 和 其 他 垂直 定位 属性 相 比 没有 任何 
的 优势 ， 尽 管理 论 上 讲 其 特点 明确 ， 并 且 有 具有 以 下 几 个 明显 的 优势 。 

首先 ， 文 本 类 属性 值 的 垂直 对 章 与 左右 文字 大 小 和 高 度 都 没有 关系 ， 而 所 有 线性 类 属性 值 
的 定位 都 会 受到 兄弟 内 联 元 素 的 影响 。 

其 次 ， 文 本 类 属性 值 的 垂直 对 齐 可 以 像素 级 精确 控制 。 通 党 而 言 ， 无 论 是 图 文 对 齐 还 是 文 
字 和 文字 对 齐 ， 文 字 大 小 或 图 片 的 高 度 都 是 固定 的 ， 不 可 能 说 为 了 对 齐 效 果 ， 把 设计 师 设 计 好 
的 16px 文字 改 成 14px， 因 此 ， 线 性 类 属性 值 中 的 baseline 和 middle 实现 的 对 齐 我 们 是 
无 法 精确 控制 其 垂直 对 齐 位 置 的 ， 因 为 这 两 个 值 的 对 齐 是 和 字符 走 的。 但 是 ，text-top 和 
text-bottom 则 无 此 问题 : 如 果 是 图 文 对 齐 ， 我 们 可 以 通过 改变 父 元 素 的 font-size 大 小 
精确 控制 对 齐 位 置 ， 如 果 是 文字 和 文字 对 齐 ， 我 们 可 以 改变 文字 的 Line-heignht， 也 就 是 通 
过 改变 元 素 的 高 度 (上 下 边缘 位 置 ) 精确 控制 对 齐 位 置 。 

然而 ， 命 运 束 是 如 此 不 公 ， 有 些 CSS 属性 设计 的 初衷 可 能 很 简单 ， 结 果 却 满天飞 ， 有 些 属 
性 值 理论 应 该 有 大 成 ， 实 际 却 无 人 问津 。vertical-align 的 文本 类 属性 值 就 是 代表 之 一 。 
它 为 什么 会 有 这 样 糟糕 的 际遇 呢 ? 

我 认为 原因 很 多 ， 有 基体 有 以 下 几 个 。 

(1) 使 用 场景 缺乏 。 当 前 CSS 重 构 以 精致 布局 为 主流 , “对 齐 文本 ”的 场景 相 比 旧时 代 要 
少 很 多 。 

(2) 文本 类 重 直 对 齐 理解 成 本 高 。 我 发 现 这 样 一 个 现象 ， 当 需要 调整 内 联 元 素 垂 直 位 置 的 时 候 ， 
有 人 往往 会 使 用 非 设 计 本 意 的 margin 定位 甚至 relative 定位 去 纠正 不 对 齐 的 问题 ;或 者 更 资深 
一 点 儿 的 开发 人 员 会 配合 具体 场景 使 用 合适 的 vertical-align 数值 进行 定位 。 为 什么 呢 ? 因为 后 
面 这 3 种 生 直 定位 策略 显然 要 比 text-top 和 text-bottom 属性 值 容易 理解 得 多 , 简单 才 是 王道 。 

(3) 内 容 区 域 不 直观 且 易 变 。 如 今 实 际 对 外 的 项 目 布局 都 讲求 精确 布局 、 像 素 级 还 原 。 而 
内 容 区 域 默认 是 看 不 见 的 ， 需 要 根据 经 验 或 者 其 他 手段 才能 呈现 ， 这 么 厂 烦 的 事情 显然 是 会 影 
啊 开 有 效率 的 ; 然后 最 大 的 问题 还 在 于 “ 易 变 ” 内 容 区 域 的 大 小 是 和 字体 font-family 密切 
相关 的 ， 要 知道 ， 不 同 的 系统 、 不 同 的 平台 使 用 的 字体 往往 都 是 不 一 样 的 ， 比 方 说 ，Windows 
系统 下 使 用 “微软 雅 黑 ”字体 ， 那 能 保证 OS X 系统 或 者 手机 系统 还 有 “微软 雅 黑 ”字体 吗 ? 
一 旦 字体 不 一 样 ， 内 容 区 域 大 小 就 会 不 一 样 ， 导 致 的 就 是 不 同 设备 下 对 齐 的 位 置 是 不 一 样 的 ， 
也 残 是 我 们 所 说 的 “不 兼容 >。 如 果 对 视觉 要 求 较 高 ， 这 显然 就 是 一 个 比较 严重 的 问题 了 。 

于 是 ， 这 一 系列 的 原因 导致 文本 类 属性 值 虽然 理论 上 强大 ， 但 实际 实用 价值 却 有 限 ， 至 少 
我 没 发 现 什么 场景 下 其 具有 明显 的 使 用 优势 。 
5.3.6 ”人 简单 了 解 vertical-align 上 标 下 标 类 属性 值 

vertical-align 上 标 下 标 类 属性 值 指 的 束 是 sup 和 super 两 个 值 ， 分 别 表 示 下 标 和 上 


标 。 在 HTML 代码 中 ， 有 两 个 标签 语义 就 是 下 标 和 上 标 ， 分 别 是 上 标 <sup> 和 下 标 <sub>， 因 为 
这 两 个 HTML 标签 长 得 很 类 似 ， 所 以 很 多 人 经 利 记 不 清 到 旗 哪 个 是 上 标 哪个 是 下 标 。 我 告诉 大 
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家 一 个 记忆 方法 ， 束 是 看 p 和 b 两 个 字母 的 圈 圈 位 置 ， 如 宁 疾 圈 在 上 面 ， 束 是 “上 标 ” 如 果 圈 
圈 在 下 面 ， 就 是 “下 标 ” 

实际 上 ， 这 两 个 HTML 标签 不 仅 语 义 上 和 sub 和 super 类 似 ， 长 相 上 也 很 像 ， 只 是 我 一 
直 没 想 明 和 白 : 为 什么 CSS 的 vertical-align 属性 的 下 标 是 sub, 和 HTML 标签 <sup> 一 样 ， 
而 上 标 super 却 多 了 个 er， 和 HTML 标签 <sub> 不 一 样 了 呢 ? 

最 后 , HTML 标签 <sup> 和 <sup> 的 vertical-align 属性 也 和 super 和 sub 有 着 非 同 
一 般 的 关系 ， 那 束 是 <sup> 标 签 默 认 的 vertical-align 属性 值 就 是 super，<sub> 标 签 默认 
的 vertical-align 属性 值 就 是 sub。 上 标 常 用 作 标 注 ， 如 图 5-44 所 示 。 

对 应 HTML 如 下 : 








zhangxinxu<sup>[1]</sup> 
下 标 在 数学 公式 、 化 学 表达 式 中 用 得 比较 多 ， 如 图 5-45 所 示 。 对 应 HTML 如 下 : 


NH<sub>4</sub>HCO<sub>3</sub> 


zhangxinxulll NHaAHCO3 


图 5-44 上 标 效 果 示 意 图 5-45 下 标 效 果 示 意 


基本 上 ，vertical-align 上 标 下 标 类 属性 值 的 实际 应 用 价值 也 束 上 面 这 点 儿 了 ， 设 计 
本 意 之 外 的 使 用 价值 几乎 就 是 零 。 看 看 这 两 个 属性 值 的 定义 ， 就 知道 我 为 什么 这 么 说 了 。 
@ vertical-align:super: 提高 盒子 的 基线 到 父 级 合适 的 上 标 基 线 位 置 。 
@ vertical-align:sub: 降低 盒子 的 基线 到 父 级 合适 的 下 标 基线 位 置 。 
没 想 到 规范 中 也 会 出 现 “ 合 适 ” 这 样 模棱两可 的 名 词 ， 这 束 让 人 很 荡然 了 。 所 以 ， 想 利用 
此 属性 精确 定位 和 布局 显得 困难 重重 ， 只 能 用 来 实现 对 垂直 位 置 要求 不 高 的 上 标 下 标 效果 。 
然后 ， 有 一 点 需要 注意 ，vertical-align 上 标 .， 
下 标 类 属性 值 并 不 会 改变 当前 元 素 的 文字 大 小 ， 干 万 不 ete soo 
要 被 HTML 标签 中 的 <sup> 和 <sub> 误 导 , 因为 这 两 个 
HTML 标签 默认 font-size 是 smaller， 如 图 5-46 图 5-46 Chrome 浏览 匿 <sup> 门 置 CSS 
中 所 示 的 Chrome 浏览 器 内 置 CSS 设置 。 Po 


5.3.7 无 处 不 在 的 vertical-align 


本 节 算 是 对 之 前 内 容 的 一 个 必要 的 总 结 。 对 于 内 联 元 系 , 如 果 大 家 过 到 不 太 好 理解 的 现象 ， 
请 一 定 要 意识 到 ， 有 个 “ 幽 郝 衬 白 节点 ”以 及 无 处 不 在 的 vertical-align 属性 。 

虽然 同属 线性 类 属性 值 ， 但 是 top/bottom 和 baseline/middle 却 是 完全 不 同 的 两 个 
帮派 ， 前 者 对 齐 看 边缘 看 行 框 盒子 ， 而 后 者 是 和 字符 x 打交道 。 因 此 ， 细 细 考 究 ， 两 者 的 行为 
表现 实则 大 相 径 隆 ， 一 定 要 注意 区 分 。 

vertical-align 属性 值 的 理解 可 以 说 是 CSS 世界 中 的 最 难点 。 首 先 ， 需 要 深入 了 解 内 
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联 使 模型 ， 其 次 ， 不 同属 性 值 定义 完全 不 同 ， 且 很 多 属性 table-cell 元 妹 有 着 不 同 的 定义 :; 
同时 最 终 表现 与 字符 x<、line-height， 和 font-size、font-family 属性 密切 相关 ， 如 
条 要 通 透 ， 需 要 对 这 些 属性 都 有 比较 深入 的 了 解 ， 因 此 ， 本 章 的 内 容 是 值得 反复 研读 的 。 
本 章 目前 给 出 的 所 有 示例 都 是 展示 单 属 性 值 和 默认 值 paseline 如 何 作用 的 , 但 是 实际 开 
发 的 时 候 ， 经 常会 出 现 前 后 两 个 内 联 元 素 同 时 设置 baseline 以 外 属性 值 的 情况 ， 有 些 人 可 能 
会 手足 无 措 ， 毕 竟 单 个 属性 值 的 理解 就 够 喧 ， 多 个 属性 一 起 岂 不 脑子 都 转 不 过 来 ? 实际 上 ， 根 
据 我 的 反复 测试 和 确认 ，vertical-align 各 类 属性 值 不 存在 相互 冲突 的 情况 ， 虽 然 某 个 
vertical-align 属性 值 确实 会 影响 其 他 元 素 的 表现 ， 但 是 这 种 作用 并 不 是 直接 的 。 所 以 ， 
在 分 析 复 茶场 景 的 时 候 ， 仪 需要 人 套用 定义 分 析 当 前 vertical-align 值 的 作用 就 可 以 了 。 


5.3.8 基于 vertical-align 属性 的 水 平 垂 直 居 中 弹 框 


最 后 ， 推 荐 一 个 我 自己 觉得 非常 棒 的 vertical-align 属性 实践 ， 就 是 使 用 纯 CSS 实现 
大 小 不 固定 的 弹 框 永远 居中 的 效果 ， 并且 如 果 伪 元 素 换 成 普通 元 系 , 连 IE7 浏览 器 都 可 以 兼容 。 

其 HTML 结构 很 简单 ， 一 个 container， 显 示 半 透明 背景 ， 然 后 里 面 的 子 元 素 就 是 弹 框 
主体 ， 假 设 类 名 是 .dialog， 则 HTML 如 下 : 






































<div class="container"> 
<div class="dialog"></dialog> 
</div> 


核心 CSS 代码 如 下 : 


.Container { 
position: fixed; 
top: 0; right: 0; bottom: 0; left: 0; 
background-color: rgba(0,0,0,.5); 
text-align: center; 


font-size: 0); 





+ 


white-space: nowrap; 
overflow: auto; 

} 

.Ccontainer:after { 
content: "7 
display: inline-block; 
height: 100%; 
vertical-align: middle; 

| 

.dialog { 
display: inline-block; 
vertical-align: middle; 
text-align: left; 
font-size: 14px; 


white-space: normal; 
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此 时 ， 无 论 浏 跑 器 尺寸 是 多 大 ， 也 无 论 弹 框 太 寸 是 多 少 ， 我 们 的 弹 框 永远 都 是 后 中 的 。 眼 
见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/S/3-10.php 或 者 扫 右 侧 的 二 维 人 码 。 [四 | F 

目前 主流 实现 ， 尤 其 传统 PC 问 页 面 ， 几 乎 都 是 根据 浏览 右 的 尺寸 和 弹 “b 
框 大 小 使 用 JavaScript 精确 计算 弹 框 的 位 置 。 相 比 传统 的 JavaScript 定位 ， 这 Ph: 
里 的 方法 优点 非常 明显 。 

(1) 节省 了 很 多 无 谓 的 定位 的 JavaScript 代码 ， 也 不 需要 浏览 器 resize 国 
事件 之 类 的 处 理 ， 当 弹 杠 内容 动态 变化 的 时 候 ， 也 无 须 重 新 定位 。 

(2) 性 能 更 改 、 演 染 速 度 更 快 ， 毕 葛 浏 览 器 内 置 CSS 的 即时 泻 染 显然 比 JavaScript 的 处 理 
要 更 好 。 

(3) 可 以 非常 灵活 控制 答 直 居中 的 比例 ， 比 方 说 设置 : 

.container:after { 

height: 90%; 

} 
则 弹 框 不 是 垂直 导 中 对 齐 ， 而 是 近似 上 下 2:3 这 种 感觉 的 对 草 ， 反 而 会 让 人 有 视 党 上 居中 的 

(4) 容 右 设置 overflow:auto 可 以 实现 弹 框 高 度 超过 一 屏 时 依然 能 看 见 屏 幕 外 的 内 容 ， 
传统 实现 方法 则 比较 伸 众 。 

然后 ， 这 里 的 技巧 还 有 一 个 关键 点 是 半 透 明 黑 色 蒙 层 和 弹 杠 元素 是 在 一 起 的 父子 关系。 所 
以 ， 上 面 的 示例 代码 中 ， 半 透 明 黑 色 花 层 效 果 借 助 rgba 半 透 明 背 景色 实现 ， 对 于 不 文 持 rgba 
的 IE8 浏览 器 ， 我 建议 制作 一 个 例如 10 像素 x10 像素 的 同等 效果 的 半 透 明 PNG 图 片 ， 然 后 作 
为 base64 URL 地 址 直接 使 用 ， 可 参考 上 上面 的 演示 3-10， 或 者 也 可 以 使 用 下 的 渐变 滤 镜 实现 。 

此 方法 实现 的 原理 天 键 就 是 两 个 vertical-align:middle,， 前 面 “ 图 片 近 似 垂直 居中 ” 
那里 只 图 片 一 个 元 素 verticalLl-align:middle 吏 实现 了 垂直 抽 中 ,原因 束 是 1ine-height 
大 小 设置 得 恰到好处 ， 但 是 对 于 弹 框 ， 高 度 不 确定 ， 显 然 不 能 使 用 某 个 具体 的 行 高 值 创 建 足够 
高 的 内 联 元 聂 。 于 是 ， 这 里 借助 伪 元 系 创 建 了 一 个 和 外 部 容 喜 一 样 高 的 宽度 为 0 的 inline- 
block 元 素 。 有 种 “ 幽 姑 空 日 节点 ”的 感 郊 。 

下 面 是 原理 作用 的 关键 部 分 ， 在 5.3.7 节 讲 过 如 何 分 析 多 个 有 合作 七 让 站 上 = 二 二 下 的 作用 ， 根 
据 定义 专注 当前 元 素 即 可 ,vertical-align:middle 定义 是 元 素 的 中 线 和 字符 x 中 心 点 对 齐 。 

(1) 在 本 例 中 ， 由 于 font-size 设置 为 0， 所 以 x 中 心 点 位 置 束 是 .container 的 上 边 
缘 ， 此 时 ， 高 度 100s 的 宽度 为 0 的 伪 元 素 和 这 个 中 心 点 对 齐 。 如 果 中 心 点 位 置 不 动 ， 这 个 伪 
元 系 上 面 一 半 的 位 置 应 该 在 .container 的 外 面 ,但 是 CSS 中 默认 是 左上 方 排列 对 齐 的 ,所 以 ， 
伪 元 素 和 这 个 原本 在 容器 上 边缘 的 x 中 心 点 一 起 往 下 移动 了 半 个 容 右 高 度 ， 也 就 是 此 时 x 中 心 
点 残 在 容 髓 的 垂直 中 心 线 上 。 

(2) 弹 框 元 系 .dialog 也 设置 『 vertical-align:middle。 根 据 定 义 ， 弹 框 的 垂直 中 
心 位 置 和 xXx 中 心 点 位 置 对 齐 ， 此 时 ，x 中 心 点 束 在 容器 的 王 直 中 心 位 置 ， 于 是 .dialog 元 素 就 
和 容器 的 垂直 中 心 位 置 对 齐 了 ， 从 而 实现 了 垂直 居中 效果 。 
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(3) 水 平 居 中 就 text-align:center 实现 ， 非 常 好 理解 。 

按照 初衷 ， 块 级 元 系 负 贡 布 局 ， 内 联 元 素 设 置 内 容 。 但是， 这 里 的 弹 框 届 中 却 是 把 块 级 元 
素 内 联 化 ,利用 一 些 内 联 属性 实现 垂直 居中 效果 , 这 也 是 不 得 已 而 为 之 ,因为 vertical-align 
等 内 联 属 性 确实 比 块 级 属性 强悍 ， 也 正 因为 CSS 世界 在 布局 上 的 弱势 ， 后 来 多 栏 布 局 、 弹 性 盒 
子 布局 以 及 栅 格 布局 一 个 一 个 都 出 来 补 强 了 。 














第 6 章 
流 的 破坏 与 保护 

















CSS 世界 中 正常 的 流 内 容 或 者 流 布 局 虽然 也 足够 强大 ， 但 是 实 现 的 总 是 方 方 正 正 、 规 规矩 
和 矩 的 效果 ， 有 时 候 我 们 希望 有 一 些 特殊 的 布局 表现 ， 例 如 ， 文 字 环 绕 效 果 ， 或 者 元 素 固 定 在 系 
个 位 置 ， 要 实现 这 样 的 效果 ， 正 常 的 法 就 有 些 捉 衬 见 肘 。 因 此 ，CSS 中 有 一 类 属性 ， 专 门 通过 
破坏 正常 的 “ 流 ” 来 实现 一 些 特殊 的 样式 表现 。 当 然 ， 所 谓 生 生 相 死 ， 既 然 有 破坏 ， 束 有 保护 
其 他 元 素 不 和 极 破 坏 的 属性 ， 本 章 就 来 介绍 那些 “破坏 流 ” 和 “保护 流 ” 的 CSS 属性 。 


6.1 麻风 属性 ELoat 





6.1.1 float 的 本 质 与 特性 


CSS 世界 中 的 float 属性 是 一 个 年 代 非 常人 久远 的 属性 。 说 这 人 句 话 是 什么 意思 呢 ? 有 时 候 ， 
要 了 解 茶 一 事物 ， 最 好 移 和 弄 清 芭 其 诞生 的 时 代 育 景 。 对 于 新 于 CSS 开 肥 人员 ， 尤 其 果 面 中 Web 
产品 开发 人 员 ，float 属性 可 以 说 是 用 得 最 频 楷 的 布局 属性 了 ， 所 以 他 们 很 可 能 会 对 float 
属性 有 误解 ， 认 为 float 属性 就 是 为 各 种 块 状 布局 而 设计 的 ， 实 际 上 不 是 的 。 在 Web 诞生 之 
初 ， 市 宽 就 那么 一 点点 ， 我 们 能 够 做 到 的 也 只 是 展示 文字 以 及 零星 图 片 而 已 ， 怎 么 可 能 浮动 设 
计 的 目的 就 是 为 了 实现 各 种 砖头 式 的 复杂 布局 呢 ? 那个 年 代 复 杂 布 局 都 是 用 <tab1le> 实 现 的 。 
既然 这 样 ， 那 Eloat 属性 设计 的 目的 客 葛 是 什么 呢 ? 

很 简单 ， 一 句 话 : 浮动 的 本 质 就 是 为 了 实现 文字 环绕 效果 。 而 这 种 文字 环绕 ， 主 要 指 的 就 
是 文字 环绕 图 片 显示 的 效果 。 前 文 多 次 提 到 ，CSS2 属性 的 设计 都 是 为 图 文 展示 服务 的 ，float 
也 是 如 此 。 上 所 以 ,大 家 应 该 也 多 少 对 为 什么 老 下 浏览 圳 与 浮动 相关 的 bug 一 火车 都 骤 不 下 有 些 
了 解 了 吧 ! 人 家 的 功能 本 来 束 很 里 纯 ， 只 是 让 文字 可 以 绕 着 图 片 跑 ， 你 偏 要 各 种 布局 ， 结 果 拌 
不 住 了 吧 ! 

很 显然 ， 从 float 属性 的 设计 初衷 来 看 ， 当 下 那些 漫天 飞舞 的 浮动 属性 完全 束 古 滥用 了 。 
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这 其 实 不 难 理解 。 当 你 手中 只 有 一 把 锤子 的 时 候 ， 你 往往 会 把 一 切 问题 都 看 成 钉子 。 浮 动 
属性 用 来 布局 非常 符合 现实 世界 的 认 知 ， 什 么 认 知 呢 ? 就 是 搭 积 木 或 者 说 叙 砖 头 砌 增 ， 反 映 在 
代码 实现 上 融 是 把 元 素 一 个 一 个 定 宽 定 高 ， 通 过 浮动 一 个 一 个 堆积 起 来 ， 理 论 上 一 个 
float :left 声明 几乎 残 可 以 把 整个 页 面 结构 都 弄 出 来 (如 图 6-1 所 示 ), 而 且 内 联 元 素 的 间 隐 
问题 、margin 合并 问题 都 没有 ， 对 于 新 于 而 言 ， 不 知道 多 开心 ! 易学 义 好 用 ， 比 “ 流 ” 这 种 
玄 芯 乎 乎 的 东西 靠 谱 多 了 。 


| width:120px: 


width:100px. width:l20px width:120px; width:120px; width:1 20px 
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6-1 全 浮动 属性 搭建 网 页 结构 


乍 一 看 ，float 好 像 也 能 满足 我 们 布局 页 面 的 需求 ， 但 是 实际 上 ， 这 种 砌 砖头 式 的 布局 方 
式 融 像 妙 脆 角 ， 一 碰 融 碎 ， 主 要 在 于 其 缺少 弹性 。 举 个 例子 ， 一 旦 茶 个 列表 高 度 变局 了 ， 则 下 
面 的 列表 就 可 能 发 生 不 愿 看 到 的 布局 错位 ， 抑 或 是 日 后 我 们 需要 增加 茶 个 元 系 的 宽度 ， 则 替 一 
发 而 动 全 里 ， 其 他 元 素 也 必须 跟 厦 调整 ， 否 则 样式 必 乱 ， 也 束 是 说 布局 的 容错 性 很 粮 料 。 

如 果 说 得 再 远 一 点 ， 这 其 实 是 典型 的 “ 刚 与 柔 ” 的 思想 博弈 。 网 页 布局 如 同 我 们 构建 高 楼 
大 厦 ， 总 是 需要 应 付 各 种 突 肥 状况 ， 所 以 ， 好 的 网 页 应 该 如 同好 的 建筑 。 传 统 的 楼 房 是 典型 的 
“ 刚 ” 式 结构 ， 砖 涉 加 楼 板 ， 问 题 不 言 而 喻 ， 一 个 小 小 的 地 震 可 能 就 被 夷 为 平地 ， 而 好 的 楼 房 应 
该 是 有 “和 柔 ” 在 其 中 ， 也 就 是 高 质量 的 钢筋 结构 ， 当 地 震 导 致 房屋 播 叶 的 时 候 ， 可 以 通过 钢筋 
的 “和 柔性 ” 秋 力 而 保障 整体 结构 的 稳固 。 人 台风 筑 来 ， 很 少见 到 说 柔弱 的 柳树 航 吹 倒 ， 反 而 会 经 
种 看 到 坚固 的 电线 杆 被 风 歇 倒 的 消息 ， 道 理 其 实 也 关 似 。 

说 这 么 多 就 古 要 告诉 大 家 : 浮动 是 魔鬼 ， 少 砌 砖头 、 少 浮动 ， 要 更 多 地 去 挖掘 CSS 世界 本 
号 的 “流动 性 ”和 “ 目 适 应 性 ”， 以 构建 能 够 适用 于 各 种 环境 的 高 质量 的 网 页 布局 。 

我 们 在 移动 端 开 友 的 时 候 ， 不 可 避免 要 面 对 各 种 设备 尺寸 的 问题 ， 加 上 横竖 屏 切 换 ， 其 可 
变 的 外 部 环境 非常 之 多 ， 尤 其 在 初期 ， 很 多 人 有 这 样 的 想法 固定 宽度 320 像素 ， 然 后 左右 留 
日 ; 抑或 是 320 像 系 布 局 ,然后 根据 比例 缩放 整个 页 面 以 100% 填 满 屏 幕 宽度 。 这 些 想 法 最 大 的 
问题 在 于 思维 方式 还 是 “ 刚 ” 式 思维 。 记 住 ，CSS 设计 的 初衷 就 是 表现 如 水 流 ， 富 有 弹性 ,“ 砖 
头 式 思维 ”是 逆 道 而 行 ， 是 绝 不 可 取 的 。 

如 果 进 一 步 深 究 ,，“ 刚 ” 式 思 维 的 主要 原因 还 在 于 开发 人 员 对 CSS 的 了 解 不 够 深入 ， 没 有 
能 够 了 解 到 其 表层 属性 之 下 更 深入 的 注 动 性 和 目 适 应 性 。 这 其 实 古 一 个 很 大 的 问题 ， 因 为 虽然 
前 端 从 业 人 员 众 多 ， 但 是 仍 有 很 大 一 部 分 人 不 会 得 到 这 些 深入 的 知识 和 技能 ， 也 束 很 难 跳出 这 
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些 回 定 布局 的 思维 方式 。 好 在 CSS 的 设计 总 是 因 需 求 而 生 , CSS2 的 设计 是 面 同 图 文 展示 , CSS3 
的 设计 则 是 为 了 更 绚丽 的 视觉 效果 和 更 丰富 的 网 页 布局 ,所 以 ，CSS3 出 现 了 类 似 flex 弹性 盒 
子 布局 这 种 更 表层 、 更 上 层 、 更 浅显 、 更 直 白 的 CSS 属性， 以 另外 一 种 更 加 简单 的 方式 让 大 家 
不 得 不 以 自 适应 的 方式 去 实现 布局 。 
在 第 3 章 介 绍 width 属性 时 曾 提 到 过 我 总 结 的 一 套 “ 奢 三 无 准则 ” 即 “ 无 宽度 ， 无 图 片 ， 
无 浮动 ”! 之 所 以 要 “无 浮动 ” 一 个 原因 是 纯 浮 动 布局 容错 性 差 ， 容 易 出 现 比较 严重 的 布局 问 
题 ， 还 有 一 个 原因 束 是 Eloat 本 里 就 是 麻 鬼 属性 ， 容 易 出 现 意 料 之 外 的 情况 ， 这 里 的 意料 之 外 
除了 float 属性 自身 特性 〈 如 父 元 素 高 度 塌 陷 ) 导致 的 布局 问题 外 ， 还 包括 诸多 兼容 性 问题 。 
干 万 不 要 以 为 只 要 不 用 管 IE6 和 IE7 浏览 器 就 可 以 高 枕 无 居 了 ， 实际 上 ， 当 下 float 属性 还 是 
存在 一 些 兼 容 性 问题 的 (6.5 节 中 会 有 演示 )。 
如 果 更 进一步 深入 分 析 我 们 就 会 发 现 , float 属性 的 种 种 归根 结 底 还 是 由 于 自身 各 种 特性 
导致 的 。float 都 有 哪些 有 意思 的 特性 昵 ? 具体 如 下 : 
e。 包 里 性 ; 
。 块 状 化 并 格式 化 上 下 文 ; 
。 ”破坏 文档 流 ; 
。 没有 任何 margin 合并 ; 
“ 包 囊 性 ”在 3.2.1 节 有 详细 阐述 ， 可 能 很 多 人 都 筷 记 了 ， 这 里 再 简单 提 一 下 。 上 所谓“ 包 填 
性 ”由 “ 包 里 ”和 “ 自 适应 性 ”两 部 分 组 成 。 
(1) 包 襄 。 假 设 浮动 元 素 父 元 素 宽 度 200px， 浮 动 元 素 子 元 素 是 一 个 128px 宽度 的 图 片 ， 
则 此 时 译 动 元 素 宽度 表现 为 “ 包 衷 ” 就 是 里 面 图 片 的 宽度 128px， 代 码 如 下 : 
.father { width: 200px; } 
.float { float: left; } 
= re dE LDR 
<div class="father"> 
<div class="float"> 
ne ee nd 


</div> 
</div> 


(2) 自 适 应 性 。 如 果 浮 动 元 素 的 子 元 素 不 只 是 一 张 128px 宽度 的 图 片 ， 还 有 一 大 波 普 通 
的 文字 ， 例 如 : 
<div class="father"> 
<div class="float"> 
<img src="1.jpg"> 我 是 帅哥 ， 好 巧 啊 ， 我 也 是 帅哥 ， 原 来 看 这 本 书 的 人 都 是 帅哥 ~ 
</div> 
</div> 


则 此 时 浮动 元 素 宽度 就 自 适应 父 元 素 的 200px 宽度 ， 最 终 的 宽度 表现 也 是 200px。 
当然 ， 要 想 最 大 宽度 目 适 应 父 元 素 宽 度 ， 一 定 是 在 浮动 元 素 的 “首选 最 小 宽度 ” 比 父 元 素 
的 宽度 要 小 的 前 所 下 ， 比 方 说 上 面 示意 的 “我 是 帅哥 ”等 文字 全 是 一 连 串 超 长 的 英文 字母 ， 则 
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浮动 元 叉 的 宽度 显然 莽 不 是 200px 了 。 如 果 还 不 理解 ， 建 议和 再 次 深入 3.2 节 的 内 容 ， 这 里 不 再 
葡 述 。 

块 状 化 的 意思 是 ,元 素 一 旦 float 的 属性 值 不 为 none, 则 其 display 计算 值 束 是 block 
或 者 table。 举 个 例子 ， 打 开 浏 览 器 控制 台 ， 输 入 如 下 JavaScript 代码 : 


Var Span = document.createElement ('span');) 
document .body.appendChild(span); 


console.1log('1. ' + window.getComputedStyle (span) .display); 
// 设置 元 素 左 浮动 
span.style.cssFloat = "left';) 
console.1o0g('2. ' + window.getComputedStyle (span) .display); 
结果 如 图 6-2 所 示 。 
var Span = document.createEleme wh Be ei 
document .body .appendChild{(span) 
console.log('1. ' + Window.get Co i Style(span).display); 
pan.style.cssFloat = ‘eft'; 
console.log('2. " + Window.getComputedStyle(span).display); 


1. inline 
2. block 


图 6-2 ”浮动 让 元 素 块 状 化 
因此 ， 没 有 任何 理由 出 现下 面 的 样式 组 合 : 


span { 
dieplays blocok: /* 多 余 */ 
float: left; 

} 


span { 
float: left; 
vertical-align: middle; /* 多余 */ 


} 

也 不 要 指望 使 用 text=a1l1ign 属性 控制 浮动 元 素 的 左右 对 齐 ， 因 为 text— dl 1gn 对 块 级 
元 素 是 无 效 的 。 

float 属性 与 display 属性 值 转换 关系 如 表 6-1 所 示 。 


表 6-1 float 与 display 转换 关系 表 





设 定 值 计算 值 
inline GLOGk 
inline-block Ge 
inline-table table 
table-row block 
table-row-group block 


table-column block 


6.1 广 鬼 属性 float 151 


续 表 
设 定 值 计算 值 
table-column-group block 
table-cell block 
table-caption SLOGKk 
table-header-group block 
table-footer-group block 


除了 inline-table 计算 为 table 外 ， 其 他 全 都 是 block。 人 至 于 float 元 素 的 块 状 格 
式 化 上 下 文 特性 ， 参 见 6.3 节 。 

最 后 着 重 讲 一 下 float 特性 的 精髓 “破坏 文档 流 ” 这 可 以 说 是 float 属性 的 万 恶 
之 源 ， 但 也 是 float 属性 的 立 命 之 本 ， 是 其 作用 机 制 之 所 在 。 


6.1.2 float 的 作用 机 制 


float 属性 有 个 著名 的 特性 表现 ， 吏 是 会 让 父 元 素 的 高 度 塌 陷 ， 大 多 数 场景 下 ， 这 种 特性 
会 影响 “正常 的 ”布局 ， 这 里 我 特 间 把“ 正 第 的 ”三 个 字 加 了 引号 ， 因 为 站 在 CSS 属性 的 角度 
讲 ， 我 们 硕 望 的 结 末 反而 是 一 种 不 正 营 ， 高 度 塌 陷 才 是 正常 。 甚 至 有 些 人 会 问 这 样 的 问题 :“ 如 
何 解决 浮动 让 父 元 素 局 度 塌 陷 的 bug? ” 

bug? 别 辟 了。 一定 要 明确 这 一 把 ， 浮 动 使 局 度 塌 陷 不 是 bug， 而 是 标准 ! 有 人 可 能 会 有 疑 
问 了 : 怎么 会 有 规范 让 人 “于 坏事” 的? 

还 记 不 记得 上 面 说 过 的 float 属性 的 原本 作用 “只 是 为 了 实现 文字 环绕 效果 ”? 所 以 ， 
假如 你 是 CSS 世界 的 设计 者 ， 你 会 如 何 利用 古老 的 CSS 盒 模 型 规则 实现 文字 环绕 效果 ? 

CSS 的 设计 者 就 想到 了 “破坏 文档 流 ” 这 一 招 ， 上 有 具体 招式 可 参见 下 面 的 图 例 讲 解 ， 故 事 有 的 
背景 是 这 样 的 : 我 们 的 男 主 人 公 不 仅 人 长 得 是， 而 且 心 地 非常 善 民 ， 总 是 去 外 面 给 流浪 的 小 猫 
小 狗 喂 食 ， 但 是 给 小 动物 喂食 非常 耗 况 时 间 ， 影 响 学 业 ， 因 此 主人 公 的 父 杀 把 男 主 锁 在 家 里 ， 
就 像 图 6-3 所 示 这 样 ， 一 个 框 把 男 主 人 公 给 限制 住 了 。HTML 结构 如 下 : 


<div class="father"> 






































< el 

SG 

< le 小 人 

但 是 ， 天 天 学 习 谁 也 受 不 了 ， 为 了 摆脱 父 杀 的 限制 ， 男 主 附加 了 魔鬼 属性 float， 这 种 
属性 的 作用 之 一 就 是 可 以 使 父 元 素 的 高 度 塌陷 (如 图 6-4 所 示 )， 于 是 男 主 就 这 么 摆脱 了 父 杀 
的 限制 。 没 有 了 父亲 的 限制 ， 男 主 束 可 以 和 外 面 的 小 动物 接触 了 ， 如 图 6-5 所 示 。 

从 上 面 的 政事 可 以 看 出 ，float 属性 让 父 元 系 高 度 塌陷 的 原因 就 是 为 了 实现 文字 环绕 效 琳 。 
但 是 ， 后 来 事情 的 发 展 超出 了 CSS 设计 者 的 意料 ， 图 文 展示 只 是 新 时 代 Web 展示 的 一 小 部 分 ， 
而 文学 环绕 这 种 上 世纪 风格 的 效果 现在 已 然 不 流行 了 ,于 是 float 很 少 发 挥 其 原本 的 作用 , 反 
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而 被 大 肆 使 用 满 屏 布局 。 显 然 ， 布 局 的 时 候 古 不 需要 父 元 素 塌 陷 的 。 于 是 ， 局 度 塌 陷 这 种 特性 
反而 成 为 了 float 属性 一 个 不 得 不 重视 的 坑 。 


< 
过 外 村 男 主 jg 限制 


小 猫 1， 小 猫 2， 小 猫 3， 小 猫 4， 小 猎 小 猫 1， 小 猫 2， 小 猫 3， 小 猫 4， 小 猫 

















5 ,小 猫 6 ,小 狗 1 ， 小 狗 2， 小 狗 3 ,小 3 ,小 猫 6 ,小 狗 1 ,小 狗 2 ,小 狗 3 ,小 
狗 4， 小 狗 5， 小 狗 6 狗 4， 小 狗 3， 小 狗 6 
图 6-3 ”故事 的 主要 角色 示意 图 6-4 男 主 浮动 ， 父 元 素 高 度 开始 塌陷 


然而 ,“ 高 度 塌陷 ”只 是 让 跟随 的 内 容 可 以 和 浮动 元 妹 在 一 个 水 平 线 上 ， 但 这 只 是 实现 “ 环 
绕 效 果 ” 的 条 件 之 一 , 要 想 实 现 真正 的 “环绕 效果 ”就 需要 男 外 一 个 平时 大 家 不 太 在 意 的 特性 ， 
那 就 是 “ 行 框 盒子 和 浮动 元 系 的 不 可 重 早 性 ”， 也 就 是 “ 行 框 例子 如 果 和 浮动 元 系 的 科 直 高 度 有 
合 ， 则 行 框 傅 子 在 正常 定位 状态 下 只 会 跟随 浮动 元 系 ， 而 不 会 发 生 重 营 ”。 
注意 ， 这 里 说 的 是 “ 行 框 盒子 ”， 也 残 是 每 行内 联 元 系 所 在 的 那个 盒子 ， 而 非 外 部 的 块 状 
盒子 。 实 际 上 ， 由 于 浮动 元 系 的 塌陷 ， 块 状 盒子 古 和 图 片 完全 重 镭 的 , 例如 ,我 们 给 环绕 的 <p> 
元 素 设 置 个 背景 色 ， 同 时 把 图 片 搞 透 明 ， 则 效果 如 图 6-6 所 示 。 


小 猫 1， 小 猫 2， 小 猫 3， 小 猫 
























小 猫 1， 小 猫 2， 小 猫 3， 小 猫 


,小 狂 5， 小 猫 6， 小 狗 1 ， 4 ,小 猫 5， 小 猫 6， 小 狗 1 ， 
小 狗 2， 小 狗 3， 小 狗 4， 小 狗 小 狗 2， 小 狗 3， 小 狗 4 ,小 狗 
5 ,小 狗 6 5 ,小 狗 6 
6-5 ”小 动物 们 环绕 效果 6-6 ” 块 元 系 区 域 和 图 片 完全 重 千 


但 是 ， 块 状 盒子 中 的 “ 行 框 盒子 ” 却 被 浮动 元 素 限 制 ， 没 有 任何 的 重 登 ， 我 们 可 以 借 
助 : :first-line 伪 元 素 骏 露 第 一 行 的 “ 行 框 例子 ”区 域 ，CSS 代码 如 下 : 


.animal:first-line { 





background: red; 
color: white; 


} 


结果 如 图 6-7 所 示 。 

这 种 “限制 ”是 根深 带 固 的 ， 也 就 是 “ 行 框 盒子 ”的 区 域 永 远 束 这 么 大 ， 只 要 不 改变 当前 
布局 方式 ， 我 们 是 无 法 通过 其 他 CSS 属性 改变 这 个 区 域 大 小 的 。 这 就 是 在 4.3 市 提 到 的 浮动 后 
面 元 素 margin 负 无 穷 大 依然 无 效 的 原因 。 例 如 ， 这 里 再 新 增 如 下 CSS 代码 : 


.animal { 





margin-left: -100px; 
} 


束 会 有 发现， 只 有 外 部 的 块 状 容器 盒子 尺寸 变 大 ， 而 和 浮动 元 素 牌 直方 向 有 重 县 的 “ 行 框 例子 ” 
依然 被 限 死 在 那里 ， 如 图 6-8 所 示 。 

至 此 , 浮动 作用 的 基本 机 制 算 是 介绍 完了 。 那么 了 解 float 属性 的 作用 机 制 有 什么 用 呢 ? 
很 有 用 ,除了 下 一 节 会 着 重 介 绍 基于 float 属性 的 流体 布局 之 外 , 还 有 很 有 用 的 一 点 就 是 让 我 
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们 一 下 子 知道 一 些 音 料 之 外 场景 友 生 的 原因 以 及 如 何 快速 对 症 下 药 。 


被 限 币 的 行 枢 例 下 


















TEST 
4 ,小 猫 5 ,小 并 6， 小 狗 1 ， 
小 狗 2 ,小 狗 3 ， 小 狗 4 ,小 狗 小 狗 2 ， 小 狗 3 ， 小 狗 4 ， 小 狗 
5 ,小 狗 6 5 ,小 狗 6 
图 6-7 第 一 行 背景 显示 了 行 框 例子 的 区 域 6-8 ” 行 框 盒子 区 域 固定 





我 们 不 妨 看 下 面 这 个 很 有 学 习 价值 的 例子 。 很 多 人 会 有 这 样 的 想法 ， 就 是 认为 一 个 元 素 只 
要 设置 了 具体 的 高 度 值 ， 就 不 需要 担心 float 属性 造成 的 高 度 塌陷 的 问题 了 ， 既 然 有 了 高 度 ， 
何 来 “高 度 塌陷 ”。 这 句 话 对 不 对 呢 ? 是 对 的 。 但 是 ， 其 中 也 隐 含 了 陷阱 ， 因 为 “文字 环绕 效果 ” 
是 由 两 个 特性 〈 即 “ 父 级 高 度 塌陷 ”和 “ 行 框 盒子 区 域 限制 共同 作用 的 结果 ， 定 高 只 能 解决 
“ 父 级 高 度 塌陷 ” 带 来 的 影响 ， 但 是 对 “ 行 框 盒子 区 域 限制 ” 却 没有 任何 效果 ， 结 果 导 致 的 问题 
是 浮动 元 素 垂 直 区 域 一 旦 超出 高 度 范围 , 或 者 下 面 元 素 margin-top 人 负 值 上 偏 移 , 就 很 容易 使 
后 面 的 元 素 发 生 “环绕 效果 ”， 代 码 示意 如 下 : 


<div class="father"> 





























<div class="float"> 
<img src="Zxx.Jpg"> 

Ly 

我 是 帅哥 ， 好 巧 啊 ， 我 也 是 帅哥 ， 原 来 看 这 本 书 的 人 都 是 帅哥 ~ 
</div> 
<dqiv> 虽 然 你 很 帅 ， 但 是 我 对 你 不 感 兴趣 。</div> 
.father 1{ 

height: 64px; 

border: lpx solid #444; 
} 
.float { 

float:1left,; 
} 
.float img { 

width: 60px; height: 64px; 
} 





从 这 段 代 码 可 以 看 出 父 级 元 系 .father 高 度 设 置 的 和 图 片 高 度 一 模 一 样 ， 都 是 64px。 按 
道理 ， 下 面 的 “虽然 你 很 帅 ， 但 是 我 对 你 不 感 兴趣 。” 这 些 








是 帅哥 ， 好 巧 啊 ， 我 也 是 






、 es ER 帅 埋 ， 原 来 看 这 本 书 的 人 都 
文字 应 该 居 左 显示 ， 但 最 后 的 结果 却 是 图 6-9 所 示 的 这 样 。 是 帅哥 ~ 
口口声声 说 “不 感 兴趣 >， 最 后 却 依旧 环绕 在 帅哥 图 片 ee 


感 兴 过 人 、 
周围 。 为 什么 会 出 现 这 种 现象 呢 ? 坡 环 叙 了 
虽然 肉眼 看 上 去 容器 和 图 片 一 样 高 ， 但 是 ， 大 家 都 读 过 图 6-9 意料 之 外 的 文学 环绕 效 末 


Ds Wo 














并 不 是 64PX， 而 是 要 比 64pPx 高 几 像 素 ， 带 来 的 问题 就 是 浮动 元 素 的 高 度 超 出 .father 几 像 素 。 
于 是 ， 下 面 的 文字 束 遭 殖 了 ， 因 为 “虽然 你 很 帅 ……” 这 上 段 文 字 所 在 的 “ 行 框 盒子 ”和 浮动 元 素 在 
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于 二 位 置 有 了 重 登 ， 尽 管 承 那 么 几 像 系 。 于 是 ， 区 域 被 限制 ， 形 成 了 图 6-9 所 示 的 “个 环绕 ”效果 。 
眼见 为 实 , 如 果 不 相 信 上 面 帅哥 的 魅力 , 可 以 手动 输入 http://demo.cssworld.cn/ [ae] 4 
6/1-1.php 或 者 扫 右 侧 的 二 维 码 感受 一 下 。 a 
因此 ， 妆 使 用 浮动 元 系 的 时 候 ， 比 较 稳 沁 的 做 法 还 是 采用 一 些 手 段 干 兆 = 
地 清除 浮动 市 来 的 影响 ， 以 避免 很 多 意料 之 外 的 样式 问题 的 肥 生 。 , 


6.1.3 float 蝎 深 入 的 作用 机 制 


实际 项 目 开 发 中 不 可 能 总 是 浮动 元 素 在 正常 流 元 系 的 前 面 ， 下 面 来 看 一 个 例子 。 例 如 ， 有 
一 个 标题 ， 代 人 码 如 下 : 


<h3> 标 题 </n3> 
一 直 用 得 好 好 的 ， 突 然 来 了 一 个 需求 ， 要 在 右 侧 加 一 个 “更 多 ”和 链接， 于 是 HTML 变 成 下 面 这 
样 〈( 我 们 这 里 先 忽 略语 义 是 否 得 当 的 问题 ): 

<h3> 标 题 <a href="#"> 更 多 </a></h3> 


请 问 : 我 们 直接 让 <a> 元 素 float :right 可 不 可 以 ? 

考虑 到 本 书 的 目标 浏览 器 是 IE8 及 以 上 版 本 浏览 器 ， 因 此 ， 答 案 是 : 可 以 。 但 是 ， 如 果 你 
的 项 目 很 不 对 还 需要 兼容 IE7 之 类 的 浏览 萎 ， 则 不 能 这 样 处 理 ， 因 为 “更 多 ”文字 会 浮动 在 下 
一 行内 容 的 右边 ， 而 非 标题 的 右边 。 

以 前 不 少 人 问 我 为 什么 IE6 和 IE7 译 动 元 系 会 下 一 行 显示 ， 但 却 没有 人 问 为 什么 IE8 及 以 
上 版 本 浏览 器 是 在 一 行 显示 ， 可 见 ， 似 乎 同行 显示 更 符合 大 家 的 直观 认 知 。 好 在 规范 也 确实 约 
定 了 浮动 元 素 和 内 联 元 素 在 一 行 显示 ， 但 是 ， 如 采 我 问 大 家 具体 的 作用 机 制 是 什么 ， 恐 怕 鲜 有 
人 能 回答 清楚 ! 

早 徘 感性 认 知 而 非 具 体 原理 理解 CSS 的 样式 表现 很 多 时 候 是 不 靠 谱 的 。 比 方 说 ， 还 是 这 个 
例子 ， 假 设 这 里 的 “标题 ”内 容 非 第 长 ， 超 过 了 一 行内 容 ， 请 问 : 这 里 的 “更 多 ”<a> 链 接 元 
系 该 如 何 显 示 ? 是 图 6-10 所 示 的 这 样 吗 ? 答案 是 : 不 是 的 。 正 确 表现 应 该 如 图 6-11 所 示 。 


是 一 个 非常 长 足 更 多 是 一 个 非常 长 足以 换 
以 换行 的 标题 文字 内 容 行 的 标题 文字 内 容 更 多 
图 6-10 ”假想 浮动 效果 图 图 6-11 真实 浮动 效果 图 


为 什么 呢 ? 要 想 解释 透彻 ， 那 话 义 多 了 。 首 先 ， 我 们 需要 了 解 两 个 和 float 相关 的 术语 ， 
一 是 “浮动 锚 点 ”(float anchor)， 二 是 “浮动 参考 ”(float reference)。 
。 浮动 锚 点 是 float 元 素 所 在 的 “ 流 ” 中 的 一 个 点 ， 这 个 点 本 和 映 并 不 浮动 ， 束 表现 而 言 
更 像 一 个 没有 margin、border 和 padding 的 空 的 内 联 元 素 。 
。 浮动 参考 指 的 是 浮动 元 素 对 齐 参 考 的 实体 。 
在 CSS 世界 中 ，float 元 素 的 “浮动 参考 ”是 “ 行 框 盒子 ”也 就 是 float 元 素 在 当前 
“ 行 框 盒子 ”内 定位 。 再 强调 一 过， 是 “ 行 杠 盒子” 不 是 外 面 的 包含 块 盒子 之 类 的 东西 ， 因 为 
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CSS 浮动 设计 的 初衷 仅仅 是 实现 文字 环绕 效果 。 在 CSS 新 世界 中 , float 被 赋予 了 更 多 的 作用 
和 使 命 , “浮动 参考 ”就 不 仅仅 是 “ 行 框 盒子 ”了 ， 不 过 此 非 本 书 重点 ， 就 不 展开 了 。 

正 是 因为 float 定位 参考 的 是 “ 行 框 盒子 ”所 以 “更 多 ” 才 会 在 第 二 行 显示 。 还 没 理解 ? 
那 再 具体 解释 一 下 ; 每 一 行内 联 元素 都 有 一 个 “ 行 框 盒子 ” 这 个 例子 中 标题 文字 比较 多 ， 两 行 
显示 了 ， 因 此 有 上 下 两 个 “ 行 框 盒子 ” 而 “更 多 ”所 在 的 <a> 元 素 是 在 标题 文字 后 面 ， 位 于 第 
一 行 ， 因 此 ， 这 里 设置 了 float :right 的 <a> 元 素 是 相对 于 第 二 行 的 “ 行 框 盒子 ”对 齐 的 ， 
也 就 是 图 6-11 所 示 的 效果 。 

趁 热 打 铁 ， 假 如 说 我 们 的 标题 文字 再 多 两 个 字 ， 正 好 两 行 ， 请 问 :“ 更 多 ”两 字 又 当 如 何 
显示 呢 ? 估 计 不 少 人 已 经 可 以 脑 补 出 最 终 的 样式 表现 了 ，“ 更 
多 ”会 孤零零 地 显示 在 第 三 行 的 右边 ， 但 容器 高 度 仍然 是 两 行 。” ”我 是 一 个 非常 长 长 到 是 
| a _ 以 换行 的 标题 文字 内 容 
文字 的 高 度 ， 如 图 6-12 所 示 。 重 多 

然而 ， 上 面 的 解释 有 一 个 很 大 的 漏洞 就 是 ， 如 果 float 元 

素 前 后 全 是 块 元 素 , 那 根本 没有 “ 行 框 盒子 ” 何 来 对 齐 的 说 法 ? 
此 时 ， 就 需要 上 面 提 到 的 “浮动 锚 点 ”出 马 了 。“ 浮 动 错 点 ”这 个 术语 名 称 本 身 很 具有 欺骗 性 ， 
看 上 去 应 该 与 float 的 定位 位 置 有 关 ， 实 际 上 关系 浅薄 ， 在 我 看 来 ， 其 作用 就 是 产生 “ 行 框 合 
子 ”% 因为 “浮动 锚 点 ”表现 如 同一 个 空 的 内 联 元 素 ， 有 内 联 元 素 自然 就 有 “ 行 框 盒子 ” 于 是 ， 
float 元 素 对 齐 的 参考 实体 “ 行 框 盒子 ” 对 于 块 状元 素 也 同样 适用 了 ， 只 不 过 这 个 “ 行 框 盒子 ” 
由 于 没有 任何 内 容 ， 所 以 无 尺寸 ， 看 不 见 也 摸 不 着 罢了 。 


6.1.4 ” float 与 流体 布局 


float 通过 破坏 正常 CSS 流 实 现 CSS 环 经 ， 市 来 了 烦人 的 “高 度 声 陷 ” 的 问题 ， 然 而 ， 
凡事 都 具有 两 面 性 ， 只 要 了 解 透彻 ， 说 不 定 辽 可 以 变 废 为 宝 、 化 腐朽 为 神奇 。 例 如 。 我 们 可 以 
利用 float 破坏 CSS 正常 流 的 特性 ， 实 现 两 栏 或 多 栏 的 自 适应 布局 。 

还 记 不 记得 之 前 小 动物 环绕 的 例子 ?其实 我 们 稍 加 改造 ， 就 能 变 成 一 侧 定 宽 的 两 栏目 适应 
布局 ，HTML 和 CSS 代码 如 下 : 


<div class="father"> 
<img src="me.Jjpg"> 
< 从 Clasee"™animal"™ 四 多 1; 小儿 2 .</p> 
</ TS 
.father 1{ 
overflow: hidden; 
} 
.father > img { 
width: 60px; height: 64px; 
float: left; 
} 


.animal { 









































6-12 “更 多 ”显示 在 第 3 行 


























margin-left: 7Opx; 
} 
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和 文字 环绕 效果 相 比 ， 区 别 就 在 于 .animal 多 了 一 人 meardglin=lerft: 700x; 也 残 是 押 有 小 动 
物 都 要 跟 男 主 保持 至 少 70px 的 距离 ， 由 于 图 厂 宽 度 束 60px， 因 此 不 会 发 生 环 绕 ， 目 适应 效果 达成 。 

原理 其 实 很 简单 ，.animal 元 素 没 有 浮动 ， 也 没有 设置 宽度 ， 因 此 ， 流 动 性 保持 得 很 好 ， 
设置 margin-left、border-left 或 者 padding-left 都 可 以 日 动 改 变 content box 的 尺寸 ， 
继而 实现 了 宽度 自 适 应 布局 效果 。 

我 们 不 妨 对 比 一 下 环绕 效果 的 背景 区 域 和 这 里 自 适 应 效果 的 背景 区 域 ( 见 图 6-13)， 理 解 
起 来 应 该 会 更 加 直 白 。 














小 猫 ]， 小 猫 2 ， 小 猫 3 ,小 小 猫 ] ,小 猫 2 ， 小 猫 3， 小 

猫 4， 小 猫 5， 小 猫 6， 小 狗 猫 4， 小 猫 5， 小 猫 6， 小 狗 

1 ,小 物 2， 小 移 3， 小 狗 4 ， 1 ,小 物 2， 小 狗 3， 小 狗 
小 和 独 ?， 小 狗 6 TD0px 一 3 年， 小 移 59 相沿 6 





6-13 ”环绕 效果 和 自 适 应 效果 背景 区 域 对 比 图 
没有 对 比 融 没有 震撼。 很 多 人 实现 这 样 的 效果 会 采用 下 面 这 样 的 砖头 式 的 浮动 布局 : 


.animal { 
width: 170px; 
float: right; 

} 


乍 一 看 ， 效 末 一 样 ， 但 是 实际 上 这 容错 性 和 可 拓展 性 就 差 远 了 。 一 旦 我 们 的 容器 宽度 发 生 
了 变化 ， 那 么 这 个 布局 就 基本 作废 ， 宽 度 小 了 ， 两 栏 内 容 上 下 错位 ， 宽 度 变 大 ， 中 间 间 隐 宽 到 
可 以 撑 胎 ， 融 是 因为 浮动 和 宽度 破坏 了 CSS 的 流动 性 。 这 种 感觉 束 像 是 把 记忆 合金 变 成 了 死板 
砖头 。 在 我 看 来 ， 这 类 布局 是 没有 任何 理由 使 用 这 种 “ 砌 砖头 ” 式 的 扩 术 
方案 的 。 一 个 简 简 单单 的 margin-left 忆 不 比 需要 计算 、 代 码 量 多 、 可 C 
维护 性 差 的 一 堆 CSS 代码 好 很 多 ! 
关于 此 目 适 应 布局 效果 ， 可 以 手动 输入 http:/demo.cssworld.cn/6/1-2.php 
或 者 扫 右 侧 的 二 维 码 感受 一 下 。 
一 般 而 言 ， 上 面 的 技巧 运用 于 一 侧 定 宽 一 侧目 适应 : 如 果 是 宽度 不 固 
定 ， 也 有 办 法 处 理 ， 这 会 在 6.3.2 节 中 介绍 。 如 果 是 百分比 宽度 ， 则 也 是 可 以 的 ， 例 如 : 
Leet 4 
float: left; 
width: 50%; 
} 
.right 1{ 


margin-left: S50%; 
} 


如 果 是 多 栏 布局 ， 也 同样 适用 ， 尤 其 图 6-14 所 示 的 这 种 布局 。 
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图 6-14 中 间 内 容 居中 的 元 中 右 布 局 
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假设 HTML 结构 如 下 : 


<div class="box"> 
< ree Elasser rer ea = Tr</sS 
= 
<h3 class="title"> 第 112 章 动物 环绕 </h3> 
Sa 


则 CSS 可 以 如 下 : 


.prev { 
float: left; 
} 
.next { 
float: right; 
| 
.title { 
margin: 0 7Opx; 
text-align: center; 


} 


也 就 是 说 ，.title 所 在 的 <h3> 标 题 元 系 直 接 左 右 margin， 借 助 流 体 特性 ， 你 证 不 会 和 两 个 
文字 链接 重 登 。 


6.2 float 的 天 然 死 性 clear 





6.2.1 什么 是 clear 属性 


生生 相克 ，float 这 个 夺 购 属性 也 不 例外 。CSS 有 一 个 专门 用 来 处 理 float 属性 和 带 来 的 
高 度 场 陷 等 问题 的 属性 ， J 就 是 clear。 其 语法 如 下 : 


clear: none | left | right | both 





如 果 单 看 字面 意思 ，clear:1left 应 该 是 “清除 左 浮动 ” clear:right 应 该 是 “清除 
右 浮 动 ” 的 意思 ， 实 际 上 ， 这 种 解释 是 有 问题 的 ， 因 为 浮动 一 直 还 在 ， 并 没有 清除 。 没 错 ， 并 
没有 清除 。 

官方 对 clear 属性 的 解释 是 :“ 元 系 盒 子 的 边 不 能 和 前 面 的 浮动 元 闵 相 邻 。” 

虽然 有 些 抛 口 ， 但 是 有 一 点 是 可 以 体会 出 来 的 ， 就 是 设置 『 了 clear 属性 的 元 了 素 自身 如 何 
如 何 ， 而 不 是 让 float 元 素 如 何如 何 ， 有 种 “ 己 所 不 欲 勿 施 于 人 ”的 意味 在 里 面 。 因 此 ， 我 对 
clear 属性 值 的 理解 是 下 面 这 样 的 。 

。 none: 默认 值 ， 左 右 浮 动 来 就 来 。 

。 left: 左 侧 抗 浮动 。 

。 right: 右 侧 抗 浮动 。 

。 both: 两 侧 抗 浮动 。 
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大 家 有 没有 发 现 ， 我 们 平时 除了 clear :both 这 个 声明 比较 多 以 外 ，left 和 right 这 
两 个 属性 值 几乎 无 人 问津 ， 是 因为 left 和 right 这 两 个 值 没 有 作用 吗 ? 
我 的 答案 非常 直 白 : 没 错 ， 确 实 没 有 什么 用 ! 几 是 clear:1left 或 者 clear:right 起 
作用 的 地 方 ， 一 定 可 以 使 用 clear:both 蔡 换 ! 
举 个 例子 ， 假 设 容器 宽度 足够 宽 ， 有 10 个 <1i> 元 素 ， 设 置 了 如 下 CSS 代码 : 
1i { 
width: 20px; height: 20px; 
margin: Dpx; 


float: left; 

} 

li:nth-of-type(3) { 
clear: both; 

} 


也 就 是 说 ， 第 三 个 <1i> 设 置 了 clear:both， 请 问 表现 是 怎样 的 ?或 者 这 么 问 吧 : 列表 最 后 
是 1 行 显示 、2 行 显示 ， 还 是 3 行 显示 呢 ? 





























我 们 很 容易 被 both 这 个 单词 误导 ， 因 为 其 字面 意思 是 “ 同 = = 和 
时 ”, 所 以 很 多 人 会 认为 是 3 行 , 但 实际 上 只 会 显示 2 行 , 如 图 6-15 











所 示 。 6-15 列表 2 行 显示 
原因 在 于 ，clear 属性 是 让 上 自身 不 能 和 前 面 的 浮动 元 系 相 邻 ,注意 这 里 “前 面 的 ”3 个 字 ， 
也 束 是 clear 属性 对 “后 面 的 ”浮动 元 素 是 不 同 不 问 的 ， 因 此 才 2 行 显示 而 非 3 行 。 

更 进一步 ， 考 虑 到 float 属性 要 么 就 left 要 么 就 right， 不 可 能 同时 存在 ， 同 时 由 于 
clear 属性 对 “后 面 的 ”浮动 元 系 不 闻 不 问 , 因此 , 当 clear:left 有 效 的 时 候 , clear:right 
必定 无 效 ， 也 就 是 此 时 clear :left 等 同 于 设置 clear:both; 同样 地 ，clear:right 如 果 
有 效 也 是 等 同 于 设置 clear:both。 由 此 可 见 , clear:left 和 clear:right 这 两 个 声明 就 
没有 任何 使 用 的 价值 ， 至 少 在 CSS 世界 中 是 如 此 ， 直 接 使 用 clear:both 吧 。 


6.2.2 ”成事 不 足 败 事 有 余 的 clear 


clear 属性 只 有 块 级 元 际 才 有 效 的 ， 而 : :after 等 伪 元 取 默认 都 是 内 联 水 平 ， 这 束 是 借 
助 伪 元 素 清 除 浮动 影响 时 需要 设置 display 属性 值 的 原因 。 


.Clear:after 1{ 























content: "1 
人 SEE 7 大 也 本 以 是 TBTH6ele 或 省 是 LD3t Ttam' 
clear: both; 

} 


然而 ， 利 用 伪 元 素 或 者 直接 使 用 下 面 HTML， 有 时候 也 会 产生 一 些 意 想不到 的 问题 : 
<div style="clear:both;"></div> 


继续 前 面 那 个 小 动物 环绕 的 例子 ， 如 果 我 们 在 右 侧 自 适 应 内 容 里 面 使 用 了 类 似 这 样 的 样 
式 ， 则 可 能 会 发 生 右边 的 内 容 跑 到 图 片 下 边 的 情况 ，HTML 代码 如 下 : 
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<div class="father"> 
<img src="me.Jjpg"> 
<div class="animal"> 
小 狂 1， 小 独 2， 
<div class="clear"></div> 
小 狂 3， 小 狂 4，... 
</div> 
</div> 


结果 却 是 如 图 6-16 所 示 。 眼见 为 实 , 手动 输入 http://demo.cssworld.cn/6/2-1.php 或 者 扫 下 面 的 二 
维 码 。 





小 猫 ]， 小 猫 2 ， 










小 猫 3， 小 猫 4， 小 狭 5 ,小 
猫 6， 小 狗 1 ,小 狗 2， 小 狗 
3 ,小 狗 4 ,小 独 5 ， 小 狗 b 









6-16 clear:both 导致 目 适 应 布局 错位 示意 


由 于 clear:both 的 作用 本 质 是 让 上 自己 不 和 float 元 素 在 一 行 显示 ， 并 不 是 真正 意义 上 
的 清除 浮动 ， 因 此 float 元 素 一 些 不 好 的 特性 依然 存在 ， 于 是 ， 会 有 类 似 下 面 的 现象 。 

(1) 如 果 clear:both 元 素 前 耐 的 元 素 就 是 float 元 素 ， 则 margin-top 负 值 即使 设 
成 -9999px， 也 不 见 任 何 效果 。 

(2) clear:both 后 面 的 元 素 依 旧 可 能 会 发 生 文字 环绕 的 现象 。 举 个 例子 ， 如 下 HTML 
和 CSS: 

















<div class="father"> 

<img SrcC="ZXX.]jPd"> 

我 是 帅哥 ， 好 巧 啊 ， 我 也 是 帅哥 ， 原 来 看 这 本 书 的 人 都 是 帅哥 ~ 
</div> 
<div> 昌 然 你 很 籼 ， 但 是 我 对 你 不 感 兴 趣 。</qdiv> 
.father:after { 

content: ''; 





display: table; 
clear: both; 
} 
.father img { 
float: left; 
width: 60px; height: 64px; 
} 
‘father + div { 是 帅哥 ， 好 巧 啊 ， 我 也 是 
margin-top: -2px; 帅 襄 ， 原 来 看 这 本 书 的 人 都 


是 帅哥 ~ 










看 量 然 你 很 澳 ， 但 是 我 对 停 不 
虽然 .fathet 父 元 素 的 最 后 设置 了 clear:both 来 阻止 浮动 ” 套 舞 . 





对 后 面 元 素 的 影响 ， 但 是 最 后 结果 错位 依然 发 生 了 ， 如 图 6-17 图 6-17 clear:pboth 依然 
所 示 。 发 生 布 局 错位 示意 图 
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由 此 可 见 ，clear:both 只 能 在 一 定 程度 上 消除 浮动 的 影响 ， 要 想 完 关 地 去 除 译 动 元 素 的 
影响 ， 还 需要 使 用 其 他 CSS 声明 。 那 应 该 使 用 哪些 CSS 声明 呢 ? 请 看 6.3 节 。 


6.3 CSS 此 寞 的 结 寞 一 一 BFC 


6.3.1 BFC 的 定义 


BFC 全 称 为 block formatting context， 中 文 为 “ 块 级 格式 化 上 上下文" 相对 应 的 还 有 IEC， 
也 就 是 inline formatting context， 中 文 为 “内 联 格式 化 上 下 ”。 不 过 IFC 作用 和 影响 比较 隐 上 星 ， 
我 们 就 不 介绍 了 ， 我 们 将 学 习 重 点 放 在 BFC 上 。 

关于 BFC 各 种 特性 什么 的 ， 说 起 来 很 喝 呆 ， 而 我 喜欢 用 “CSS 世界 的 结 界 ”这 种 称谓 概括 
BFC 的 特性 。“ 结 界 ” 这 个 词 大 家 应 该 都 理解 的 ， 指 通过 一 些 特定 的 手段 形成 的 封闭 空间 ， 里 
面 的 人 出 不 去 ， 外 和 面 的 人 进 不 来 ， 具 有 极 强 的 防御 力 。BFC 的 特性 表现 如 出 一 轮 。 

大 家 请 记 住 下 面 这 个 表现 原则 : 如 采 一 个 元 素 具 有 BFC， 内 部 子 元 素 再 怎么 翻 江 倒 海 、 翻 
云 履 雨 ， 都 不 会 影响 外 部 的 元 素 。 所 以 ,BEFC 元 素 是 不 可 能 及 生 margin 重 登 的 , 因为 margin 
重生 是 会 影响 外 和 耐 的 元 素 的 ; BFC 元 素 也 可 以 用 来 清除 浮动 的 影响 ， 因 为 如 果 不 清除 ， 子 元 素 
浮动 则 父 元 素 高 度 塌陷 ， 必 人 然 会 影 啊 后 面 元 素 布 局 和 定位 ， 这 显然 有 违 BFC 元 系 的 子 元 素 不 会 
影响 外 部 元 系 的 设 定 。 

那 什么 时 候 会 触发 BFC 呢 ? 常见 的 情况 如 下 : 

。 <html> 根 元 系 ; 

。 float 的 值 不 为 none:; 

。 overflow 的 值 为 auto、scroll 或 hidden:; 

。 display 的 值 为 table-cell、table-caption 和 inline-block 中 的 任何 一 个 ; 

。 position 的 值 不 为 relative 和 static。 

换言之 ， 只 要 元 素 符 合 上 面 任意 一 个 条 件 ， 就 无 须 使 用 clear:botn 属性 去 清除 浮动 的 
影响 了 。 因 此 ， 不 要 见 到 一 个 <giv> 元 际 束 加 个 类 似 .clearfix 的 类 名 ， 人 否则 只 能 暴露 你 屏 
弱 的 CSS 基本 功 。 


6.3.2 BFcC 与 流体 布局 


BFC 的 结 界 特性 最 重要 的 用 途 其 实 不 是 去 margin 重 登 或 者 是 清除 float 影响 ， 而 是 实 
现 更 健壮 、 更 智能 的 自 适应 布局 。 
我 们 还 是 从 最 基本 的 文字 环绕 效果 说 起 。 还 是 那个 小 动物 环绕 的 例子 : 


<div class="father"> 

<ijmg src="me.Jjpg"> 

< Class="animaL"S 人 多 15 7 作 2 /BS 
hs i 
img { float: left; } 
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效果 如 图 6-18 所 示 。 此 时 .animal 的 内 容 显 然 受 到 了 设置 了 float 属性 值 的 图 厂 的 影响 而 
被 环绕 了 了。 此 时 如 果 我 们 给 .animal 元 素 设 置 具 有 BFC 特性 的 属性 ， 如 overflow:hidden,， 
如 下 : 


.animal { overflow: hidden; } 


则 根据 BFC 的 表现 原则 ， 具 有 BFC 特性 的 元 素 的 子 元 素 不 会 受 外 部 元 素 影 响 ， 也 不 会 影响 外 
部 元 素 。 于是， 这 里 的 .animal 元 素 为 了 不 和 浮动 元 素 产 生 任何 交集 ， 顺 着 浮动 边缘 形成 自己 
的 封闭 上 下 文 ， 如 图 6-19 所 示 (垂直 虚线 为 辅助 示意 )。 

















小 猫 1， 小 猫 2， 小 猫 3 ,小 小 猫 1， 小 猫 2， 小 猫 3， 小 

猫 4， 小 猫 5， 小 猫 6， 小 狗 猫 4， 小 猫 5 ， 小 猫 6， 小 狗 

1 ,小 狗 2， 小 狗 3， 小 狗 4 ， 1 ,小 狗 2 ,小 狗 3 ,小 狗 4 ， 
小 狗 5， 小 狗 6 浮动 边 澡 = 小 狗 5 ,小 狗 |6 








6-18 ”文字 环绕 基本 效果 示意 6-19 overflow:hidden 下 的 布局 标注 


也 就 是 说 , 普通 流体 元 素 在 设置 了 overflow:hidden 后 , 会 自动 填 满 容器 中 除了 浮 
动 元 妹 以 外 的 剩余 空间 ， 形 成 目 适 应 布局 效 末 ， 而 且 这 种 目 适 应 布局 要 比 纯 流 体 目 适应 
更 加 智能 。 比 方 说 ,我们 让 图 片 的 扩 寸 变 小 或 变 大 ， 右 侧目 适应 内 容 无 顷 更 改 任何 样式 代 
码 ， 都 可 以 自动 填 满 剩余 的 空间 。 例 如 ， 我 们 把 图 片 的 宽度 从 60px 改 成 30px， 结 果 如 图 6-20 
所 示 。 








小 猫 1， 小 猫 2， 小 猫 3， 小 猫 4 ， 





实际 项 目 开 发 的 时 候 ， 图 片 和 文字 不 可 能 徘 这 么 近 ， 如 果 想 要 小 猫 5， 小 猫 6 ,小 狗 1 ， 小 狗 2 ， 
小 狗 3 ， 小 狗 4 ,小 狗 5 ， 小 狗 6 





保持 合适 的 间距 ， 那 也 很 简单 ， 如 果 元 素 是 左 序 动 ， 则 浮动 元 陛 可 
以 设置 margin-right 成 透明 border-right 或 padding- 图 6-20 浮动 元 素 宽度 变 小 后 
、 ER 内 容 目 动 完美 填 元 

right; 又 或 者 右 侧 BFC 元 系 设 置 成 透明 border-left 或 者 

padding-left， 但 不 包括 margin-left， 因 为 如 果 想 要 使 用 margin-left， 则 其 值 必须 
是 序 动 元 素 的 宽度 加 间 际 的 大 小 ， 就 变 成 动态 不 可 控 的 了 ， 无 法 大 规模 复 用 。 因 此 ， 套 用 上 面 
例子 的 HTML， 假 设 我 们 希望 间隙 是 10px， 则 下 面 这 几 种 写法 都 是 可 以 的 : 

® mg { margin-right: l0px» } 





























es 1img { border-right: lO0px solid transparent; | 
“ imo 1 Paddine-rLghts LO0OpPx> | 
e .animal { border-left: lO0Opx solid transparent,; } 
® animal {| padding= rights 1l0px? | 
一 般 而 言 ， 我 喜欢 通过 在 浮动 元 素 上 设置 margin 来 控制 间距 ， 也 就 是 下 面 的 CSS 代码 : 
img { 
float: left; 
margin-right: 10px; 
} 


.animal { 





Overflow: hidden,; 
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布局 效果 如 图 6-21 所 示 。 

和 基于 纯 流 体 特性 实现 的 两 栏 或 多 栏目 适应 布局 相 比 , 基于 BFC 特性 的 自 适 应 布局 有 如 下 
全 

Ey PP 二 DR 小 猫 1 ， 小 猫 2 ,小 猫 3， 小 

(1) 目 适 应 内 容 由 于 封闭 而 更 健壮 ， 容 错 性 es gh gh 
更 强 。 比 方 说 ， 内 部 设置 clear:both 不 会 与 ae ， ' 小 狗 
float 元 素 相互 干扰 而 导致 错位 ， 也 就 不 会 发 生 一 一 
类 似 于 图 6-22 所 示 的 问题 。 图 6-21 设置 合适 间距 后 的 效果 








(2) 目 适 应 内 容 目 动 填 满 浮动 以 外 区 域 ， 无 
须 天 心 浮动 元 系 宽 上 度 ， 可 以 整 站 大 规模 应 用 。 比 
方 说 ， 抽 象 几 个 通用 的 布局 类 名 ， 如 ; 

.left { float: left; } 


ee 图 6-22 ”clear:both 导致 上 自 适应 布局 错位 示意 图 
.bfc { overflow: hidden; } 


于 是 ， 只 要 遇 到 两 栏 结 构 ， 直 接 使 用 上 面 的 结构 类 名 就 可 以 完成 基本 的 布局 。HTML 示意 
os 


<div class="bfc"> 

<img src="me.jpg" class="1left"> 

< Glase="bfevsh i 1; 2 ,uw </B> 
/Ly 


上 面 的 类 名 只 是 示意 ， 有 具体 可 根据 自己 项 目的 规范 设 定 ， 甚 至 直接 用 .1 或 者 .r 这 样 的 极 
短命 名 也 是 可 以 的 。 

而 纯 流 体 布局 需要 大 小 不 确定 的 margin 或 padding 等 值 撑 开 合适 间距 ， 无 法 CSS 组 件 
化 。 例 如 ， 前 面 出 现 的 70px， 其 他 类 似 布局 可 能 就 是 90px， 无 法 大 规模 复 用 : 


.animal { margin-left: 7Opx; } 


两 种 不 同 原 理 的 自 适 应 布局 策略 的 高 下 一 看 便 知 。 甚 至 可 以 这 么 说 ,有 了 BEFC 自 适 应 布局 ， 
纯 流 体 特 性 布局 基本 上 没有 了 存在 的 价值 。 然 而 ， 只 是 理论 上 如 此 。 如 果 BFC 上 自 适 应 布局 真 那 
么 超 能 ， 那 为 何 并 没有 口 口 相传 呢 ? 

那 我 们 就 得 进一步 深入 理解 了 。 

理论 上 上， 任何 BFC 元 素 和 float 元 素 相遇 的 时 候 ， 都 可 以 实现 自动 填充 的 自 适 应 布局 。 
但 是 ， 由 于 绝 大 多 数 的 触发 BFC 的 属性 自身 有 一 些 古 怪 的 特性 ， 所 以 ， 实 际 操作 的 时 候 ， 能 旨 
顾 流体 特性 和 BFC 特性 来 实现 无 敌 自 适应 布局 的 属性 并 不 多 。 下 面 我 们 一 个 一 个 来 看 ， 每 个 
CSS 属性 选 一 个 代表 来 进行 说 明 。 

(1) float:1left。 浮 动 元 素 本 身 BFC 化 ， 然 而 浮动 元 素 有 破坏 性 和 包 囊 性 ， 失 去 了 元 素 
本 里 的 流体 自 适 应 性 ， 因 此 ， 无 法 用 来 实现 自动 填 满 容器 的 自 适应 布局 。 不 过 ， 其 因 兼 容 性 还 
算 民 好 ,与 搭 积 木 这 种 现实 认 知 匹配 ， 上 手 简单 ,因此 在 旧时 代 被 大 肆 使 用 ， 也 就 是 党 说 的 “ 译 
动 布局 ”， 也 算 阴 差 阳 错 地 开创 了 自己 的 一 套 布 局 。 


小 猫 1， 小 猫 2 ， 










小 狂 3， 小 猫 4 ， 小 猫 5 ， 小 
狂 6 ， 小 狗 1 ,小 狗 2 ， 小 狗 
3， 小 狗 4 ,小 狗 5 ， 小 狗 6 
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(2) position:absolute。 这 个 脱离 文档 流 有 些 严 重 ， 过 于 清高 ， 和 非 定 位 元 素 很 难 玩 
到 一 块 儿 去 ， 我 就 不 说 什么 了 。 

(3) overflow:higdden。 这 个 超 棱 ! 不 像 浮动 和 绝对 定位 ， 玩 得 有 点 儿 过 。 其 本 映 还 是 
一 个 很 普通 的 元 素 ， 因 此 ， 块 状元 又 的 流体 特性 保存 得 相当 完好 ， 附 上 BFC 的 独立 区 域 特性 ， 
可 谓 如 虎 添 又 、 宇 宙 无 敌 ! 而 且 overflow:hidden 的 BFC 特性 从 IE7 浏览 器 开始 束 支 持 ， 
兼容 性 也 很 不 错 。 唯 一 的 问题 束 是 容器 盒子 外 的 元 素 可 能 会 被 隐藏 掉 ， 一 定 程度 上 限制 了 这 种 
特性 的 大 规模 使 用 。 不 过 ， 溢 出 隐藏 的 交互 场景 比例 不 算 很 局， 所 以 它 还 是 可 以 作为 营 用 BFC 
布局 属性 使 用 的 。 

(4) display:inline-block。 这 是 CSS 世界 最 伟大 的 声明 之 一 ， 但 是 用 在 这 里 ， 就 有 
些 捉襟见肘 了 。aqaisplay:inline-block 会 让 元 素 尺 寸 包 右 收 纵 ， 完 全 就 不 是 我 们 想 要 的 
block 水 平 的 流动 特性 。 只 能 是 一 声 叹 奶 舍 弃 掉 ! 然而 ， 峰 回路 转 ， 世 事 难 料 。 大 家 应 该 知道 ， 
IE6 和 IE7 浏 贤 右 下 ，block 水 平 的 元 系 设 置 display:inline-block 元 素 还 是 block 水 
平 ， 也 就 是 还 是 会 自 适 应 容器 的 可 用 宽度 显示 。 于 是 ， 对 于 IE6 和 IE7 浏览 器 ， 我 们 会 阴 差 阳 
错 得 到 一 个 比 overflow:hidqen 更 强大 的 声明 ， 既 BFC 特性 加 喘 ， 又 流体 特性 保留 。 

.float-left { 


float: left; 
} 


.bfc-content f{ 





























display: inline-block; 
} 


当然 ，*zoom: 1 也 是 类 似 效果 ， 不 过 只 适用 于 低级 的 正 浏 览 器 ， 如 IE7。 

(5) display:table-cell。 其 让 元 素 表 现 得 像 蛙 元 格 一 样 ，IE8 及 以 上 版 本 浏览 占 才 
文 持 。 跟 qisplay:inline-block 一 样 ， 它 会 跟随 内 部 
元 素 的 宽度 显示 ， 看 样子 也 是 不 合适 的 命 。 但 是 ， 单 元 格 有 3 


一 个 请 "> 由 凑 全 得 ， Eyl 月 . 全 = | 主 全 鲁 全 六 [二 就 当 父 级 relative , 上 且 | 当 父 级 relative , 上 且 
非常 神奇 的 等 性 ， 山 是 宽度 值 设置 得 再 和 六， 实际 宽 度 世 | 国 || 必 | 必定 

















Xz 日 日 FF 大 和 上， 一 全 规 列 | 梧 
不 会 超过 表格 容器 的 宽度 。 第 3 章 单元 格 一 柱 擎 天 的 例子 利 9 2 
ui NN es 1 \ oe So atIVEe; a Re atIVe; 
SC ， 、、 就 a FF 人 
因此 ， 如 果 我 们 把 dijsplay:table-cell 这 个 BFC 册 现 六 芝 天 的 策 。 册 现 性 各 的 全 








元 素 宽 度 设 置 得 很 大 ， 比 方 说 3000px， 那 其 实 就 跟 block 就 

水 平 元 素 上 自动 适应 容器 空间 效果 一 模 一 样 了 ， 除 非 你 的 容器 列 

宽度 超过 。 实 际 上 ， 一 般 Web 页 面 不 会 有 3000 a 加 
RE SODODze SIT WO DMM SG OUD eas Wi 
守 的 模块 ， 所 以 ， 要 是 实在 不 放心 ， 设 个 9999px 好 了 ! 


.float-left { 
float: left; 
} 
.bfc-content { 
display: table-cell; width: 9999px; 
} 
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看 上 去 好 像 还 不 错 。 但 是 ， 还 是 有 了 两 点 制约 ， 一 是 需要 IE8 及 以 上 版 本 的 浏览 器 ; 二 是 应 
付 连 续 贡 文字 符 换 行 有 些 吃力 。 但 是 ， 总 体 来 看 ， 其 适用 的 场景 要 比 overflow:hidden 更 为 
J 

(6) display:table-row。 对 width 无 感 ， 无 法 自 适 应 剩余 容器 空间 。 

(7) display:table-caption。 此 属性 一 无 是 处 。 

还 有 其 他 声明 对 这 里 的 自 适 应 布局 效果 而 言 也 都 是 一 无 是 处 ， 就 不 全 部 展开 了 。 

总 结 一 下 ， 我 们 对 BFC 声明 家 族 大 致 过 了 一 过 ， 能 担任 自 适 应 布局 重任 的 也 就 是 以 下 
由 

。 overflow:auto/hidden， 适 用 于 IE7 及 以 上 版 本 浏览 器 ; 

。 display:inline-block， 适 用 于 IE6 和 IE7; 

。 display:table-cell， 适 用 于 IE8 及 以 上 版 本 浏览 器 。 

最 后 ， 我 们 可 以 提 烁 出 两 套 下 7 及 以 上 版 本 浏览 器 适 配 的 自 适 应 解决 方案 。 

(1) 借助 overflow 属性 ， 如 下 : 


.lbf-content { overflow: hidden; } 



































(2) 融合 display:table-cell 和 display:inline-block， 如 下 : 


.lbf-content { 
display: table-cell; width: 9999px; 
/* 如 果 不 需 要 兼容 IE7， 下 面 样式 可 以 省 略 */ 
*display: inline-block; *width: auto; 
| 


这 两 种 基于 BFC 的 目 适 应 方案 均 文 持 无 限 和 僚 ， 因 此 ， 多 栏目 适应 可 以 通过 藤 套 方 
式 实现 。 这 两 种 方案 均 有 一 挟 不 足 , 前 者 如 末 子 元 素 要 定位 到 父 元 素 的 外 面 可 能 会 被 隐藏， 
后 者 无 法 直接 让 连续 英文 字符 换行 。 所 以 ， 大 家 可 以 根据 实际 的 项 目 场景 选择 合适 的 技术 

最 后 ， 关 于 display:table-cell 元 系 内 连续 英文 字符 无 法 换行 的 问题 , 事实 上 古 可 以 
解决 的 ， 束 是 使 用 类 似 下 和 面 的 CSS 代码 : 


.word-break { 




















display: table; 

width: 100%; 
table-layout: fixed; 
word-break: break-all; 


} 


6.4 也 住 结 过 overflow 





要 想 彻 压 清 除 浮 动 的 影响 ， 最 适合 的 属性 不 是 clear 而 是 overflow。 一 般 使 用 
overflow:hidden， 利 用 BFC 的 “ 结 界 ” 特 性 彻 压 解决 浮动 对 外 部 或 兄 第 元 系 的 影响 。 里 然 
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有 很 多 其 他 CSS 声明 也 能 清除 浮动 ， 但 基本 上 都 会 让 元 系 的 宽度 表现 为 “ 包 早 性 ”， 也 束 是 会 
影响 原来 的 样式 布局 ， 而 overflow:hidden 声明 不 会 影响 元 素 原 先 的 流体 特性 或 宽度 表现 ， 
因此 在 我 看 来 是 最 佳 “ 绪 界 ”。 

不 过 话 义 说 回来 ，overflow 属性 原本 的 作用 指定 了 块 容器 元 素 的 内 容 洲 出 时 是 否 需 要 裁 
坟 ， 也 就 是 “ 结 界 ”只 是 其 衡 生 出 来 的 特性 ,，“ 檀 姊 ” 才 是 其 本 职工 作 。 


6.4.1 overflow 勇 裁 界 线 border box 


一 个 设置 了 了 overflow:hidden 声明 的 元 素 , 假设 同时 存在 border 属性 和 padding 属 
性 ， 类 似 于 下 面 的 CSS 代码 : 
.box { 


width: 200px; height: 80px; 
padding: 1l10px; 








border: 1l10px solid; 
overflow: hidden; 


} 
则 当 子 元 素 内 容 超 出 容器 宽度 高 度 限制 的 时 候 , 剪裁 的 边界 是 border box 的 内 边缘 , 而 非 padding 
box 的 内 边缘 ， 如 图 6-24 所 示 。 眼 见 为 实 ， 手 动 输入 http://demo.cssworld.cn/6/4-1.php 或 者 扫 下 
面 的 二 维 码 。 











6-24 ” 元素 六 裁 与 border 内 边缘 


如 果 想 实现 元 系 勇 裁 同时 四 周 留 有 间 隐 的 效果 的 话 ， 可 以 试 试 使 用 透明 边框 ， 此 时 内 间距 
padding 属性 是 无 能 为 力 的 。 这 里 举 这 个 实例 并 不 只 是 为 了 传授 这 个 小 技能 ， 也 是 为 了 以 此 为 
契机 ， 深 入 探讨 一 下 overflow 属性 的 一 个 很 经 典 的 不 兼容 问题 ， 即 Chrome 浏览 器 下 ， 如 果 容 
器 可 滚动 〈 假 设 是 垂直 滚动 )， 则 padqdqing-bottonm 也 算 在 滚动 尺寸 之 内 ， 下 和 Firefox 浏览 器 
忽略 padding-bottom。 例 如 ， 上 和 面 的 .box， 我 们 把 overflow 属性 值 改 成 auto《〈 亦 可 点 击 
实例 页 面 图 片 ),， 深 动 到 的 部 会 发 现 ，Chrome 浏览 器 下 面 是 有 10 像 权 的 空白 的 ， 如 图 6-25 所 示 。 
Firefox 和 了 IE 却 没 有 ，Firefox 浏览 颖 呈现 的 效果 如 图 6-26 所 示 。 








从 











6-25 ”Chrome 浏览 器 深 动 高 上 度 包 含 6-26 ”Firefox 浏览 器 滚动 高 度 不 包含 
padding-bottom padding-bottom 
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曾经 有 人 写 邮 件 和 我 交流 过 这 个 问题 ， 认 为 Chrome 浏览 右 的 解析 是 正确 的 ，IE 和 Firefox 
浏览 器 则 是 不 准确 的 。 在 我 看 来 ，Chrome 浏览 器 的 解析 反而 是 不 准确 的 ， 只 是 Chrome 浏览 器 
的 痊 染 表现 是 我 们 开发 所 需要 的 ， 我 们 整 会 偏心 地 认为 Chrome 是 正确 的 。 但 是 ， 正 如 一 开始 
的 例子 所 展示 的 ，overflow 的 筋 裁 或 者 深 动 的 边界 是 border box 的 内 边缘 ， 而 非 padding box 
的 内 边缘 ， 因 此 ， 忽 上 略 padding-bottom 才 是 符合 解析 规则 的 泻 染 行为 。 

但 是 事 已 宇 此 ， 争 办 到 底 谁 对 谁 错 其 实 并 没有 多 大 的 音义， 重要 的 是 我 们 知道 了 这 种 不 兼 
容 性 ， 所 以 我 们 在 实际 项 目 开 发 的 时 候 ， 要 尽量 避免 滚动 容 需 设置 padding-bottom 值 ， 除 
了 样式 表现 不 一 致 外 ， 还 会 导致 scrollHeight 值 不 一 样 ， 这 往往 会 给 开发 带 来 难以 察觉 的 
抹 烦 ， 需 要 引起 注意。 














6.4.2 了 解 overflow-x 和 overflow-y 


目 正 8 以 上 版 本 的 浏览 器 开始 ,overflow 属性 家 族 增加 了 两 个 属性 , 就 是 这 里 的 overflow-x 
和 overflow-y， 分 别 表示 单独 控制 水 平 或 于 直方 向 上 的 甬 裁 规则 。 

支持 的 属性 值 和 和 overflow 属性 一 模 一 样 。 

。 Visibles 办 认 人 

。 hidden: 甬 裁 。 

e。 scroll: 深 动 条 区 域 一 直 在 。 

。 auto: 不 足以 深 动 时 没有 深 动 条 ， 可 以 深 动 时 深 动 条 出 现 。 

这 种 相似 性 很 容易 让 大 家 产生 一 个 误区 ， 认 为 只 要 overflow-x 和 overflow-y 设置 了 
上 面 的 属性 值 ， 束 一 定 会 是 这 样 的 表现 ， 实 际 上 overflow-x 和 overflow-y 的 表现 规则 要 
比 看 上 去 复杂 些 : 如 果 overflow-x 和 overflow-y 属性 中 的 一 个 值 设置 为 visible 而 男 
外 一 个 设置 为 scroll、auto 或 hidden， 则 visible 的 样式 表现 会 如 同 auto。 也 就 是 说 ， 
除非 overflow-x 和 overflow-y 的 属性 值 都 是 visiple， 人 否则 visible 会 当成 auto 来 
解析 。 换 句 话 说 ， 永 远 不 可 能 实现 一 个 方 同 洲 出 剪裁 或 深 动 ， 男 一 方 回 内 容 洲 出 显示 的 效果 。 

因此 ， 下 面 CSS 代码 中 的 overflow-y:auto 是 多 余 的 : 


html 1 
overflow-x: hidden; 
overflow-y: auto; /* 多 余 */ 
lL 


但 是 ，scroll1、auto 和 hiqqen 这 3 个 属性 值 是 可 以 共存 的 。 




















6.4.3 ”overflow 与 深 动 条 


HTML 中 有 两 个 标签 是 默认 可 以 产生 滚动 条 的 ， 一 个 是 根 元 素 <htm1>， 另 一 个 是 文本 域 
<textarea>。 之 所 以 可 以 出 现 滚动 条 ， 是 因为 这 两 个 标签 默认 的 overflow 属性 值 不 是 
visible， 从 IE8 浏览 右 开 始 ， 都 使 用 auto 作为 默认 的 属性 值 。 这 也 就 意味 着 ， 从 IE8 浏览 
颖 开始 ， 默 认 状 态 下 是 没有 深 动 栏 的 ， 尺 寸 洲 出 才 会 出 现 ， 对 于 IE7 浏览 左 ， 其 样式 表现 就 好 
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像 设置 了 overflow-y:scroll 一 般 。 

天 于 浏览 器 的 深 动 条 ， 有 以 下 几 个 小 而 美的 结论 。 

(1) 在 PC 端 ， 无 论 是 什么 浏览 器 ， 默 认 滚动 条 均 来 自 <chtm1>， 而 不 是 <bodqy> 标 签 。 验 
证 很 简单 ， 新 建 一 个 空白 页 面 ， 此 时 <podqy> 标 签 的 默认 margin 值 是 .5em， 如 果 滚 动 条 是 由 
<bodqy> 标 签 产生 的 ， 那 么 效果 应 该 如 图 6-27 所 示 这 上 般 边缘 留 有 间 际 。 但 是 最 后 实现 结果 却 是 
图 6-28 所 示 的 这 样 没 有 间 际 。 














图 6-27 <body> 产 生 深 动 条 的 假想 效果 图 6-28 ”实际 效果 无 间隙 ， 深 动 条 由 <html> 产 生 
所 以 ， 如 采 我 们 想 要 去 除 页 面 默认 滚动 条 ， 只 需要 : 
html { overflow: hidden; } 
而 没 必 要 把 <bodqy> 也 拉 下 水 : 
html; bedy { overflow: hidden; } 


注意 ， 上 述 规 则 只 对 PC 病 有 效 ， 对 于 移动 端 并 不 一 定 适 用 。 例 如 ， 在 PC 端 ， 对 <html> 
标签 设置 overflow:hidden 可 以 隐藏 滩 动 条 茜 止 滚动 , 但 是 在 移动 端 基本 上 无 效 。 在 PC 端 ， 
窗 体 滚动 高 度 可 以 使 用 daocument .documentElement.scrollTop 获取 ， 但 是 在 移动 端 ， 
可 能 束 要 使 用 aocument .body.scrollTop 获取 。 
(2) 滚动 条 会 占用 容 圳 的 可 用 宽度 或 高 度 。 假 设 一 个 元 系 的 宽度 是 400px, CSS 代码 如 下 : 
.box { 
width: 400px; height: 100px; 


Overflow: auto; 


} 


当 子 元素 高 度 超过 100px 出 现 深 动 条 的 时 候 ， 子 元 素 可 用 的 实际 完 度 实际 上 要 小 于 400px， 因 为 深 
动 条 《〈 准 硝 地 说 应 该 是 滚动 栏 ) 占据 了 一 定 的 宽度 。 当 然 这 还 要 看 操作 系统 ， 比 方 说 在 移动 端 就 不 会 
有 这 样 的 问题 ， 因 为 移动 端的 屏 磊 尺寸 本 里 就 有 限 ， 深 动 条 一 般 都 是 苹 浮 模式 ， 不 会 占据 可 用 宽度 ， 
但 是 在 PC 端 ， 尤 其 Windows 操作 系统 下 ， 几 乎 所 有 浏览 器 的 谱 动 栏 都 会 占据 宽度 ， 而 且 这 个 宽度 大 
小 是 固定 的 。 我 通过 在 Windows 7 系统 下 的 测试 和 对 比 发 现 ，IE7 及 以 上 版 本 正 、Chrome、Firefox 
浏览 器 深 动 柱 所 占据 的 宽度 均 是 17px, 注意 , 很 精准 的 是 17Px, 我 不 知道 网 上 那些 误 人 子弟 的 20px、 
14px 是 从 哪里 来 的 。 当 然 ， 随 着 以 后 操作 系统 的 升级 ， 深 动 柱 的 宽度 发 生变 化 也 是 有 可 能 的 。 
要 知道 自己 浏览 右 的 滚动 栏 宽度 是 多 少 其 实 很 简单 ， 代 码 如 下 : 
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.box { width: 400px; overflow: scroll; } 
<div class="box"> 
<div id="in" class="in"></div> 
la 
console.109g9(400 - document .getElementById("in") .clientWidth); 


这 种 深 动 栏 占据 宽度 的 特性 有 时 候 会 给 我 们 的 布局 市 来 不 小 的 雄 烦 。 比 方 说 ， 布 局 直接 错 
位 ， 如 宽度 设 定 死 的 浮动 布局 ;又 或 者 布局 不 对 齐 ， 如 我 们 希望 实现 一 个 表格 头 固定 、 表 格 主 
体 可 以 滚动 的 效果 ， 篆 见 的 实现 方法 是 使 用 双 <table>， 表 格 头 是 一 个 独立 的 <tapLle>， 主 体 
也 是 一 个 独立 的 <table> 元 素 ， 放 在 一 个 overflow:auto 的 <div> 元 素 中 ， 这 种 实现 ， 如 果 
深 动 条 不 出 现 还 好 ， 两 个 表格 的 表格 列 可 以 完美 对 齐 ， 但 是 一 旦 深 动 条 出 现 ， 主 题 表格 可 用 宽 
度 被 压缩 ， 表 格 列 往往 就 无 法 完美 对 齐 了 。 

常用 的 解决 方法 有 下 面 两 种 : 一 种 是 <table> 元 素 使 用 固定 的 宽度 值 ， 但 是 距离 右 侧 留 有 
17px 的 间 际 ， 这 样 即使 深 动 条 出 现 ， 也 不 会 产生 任何 的 宽度 影响 ， 男 一 种 束 是 表格 的 最 后 一 
列 不 设 定 宽度 〈 文 字 最 好 左 对 齐 )， 前 面 每 一 列 都 定 死 宽度 ， 这 样 最 后 一 列 就 是 自 适 应 结构 ， 就 
算 深 动 条 出 现 ， 也 只 是 目 身 有 一 些 宽 度 变 小 ， 对 整体 对 齐 并 无 多 大 影 啊 。 

然而 ， 深 动 栏 占据 宽度 的 特性 最 大 的 问题 就 是 页 面 加 载 的 时 候 水 平 居 中 的 布局 可 能 会 产生 
晃动 ， 因 为 窗 体 默认 是 没有 这 动 条 的 ， 而 HTML 内 容 是 自 上 而 下 加 载 的 ， 束 会 发 生 一 开始 没有 
深 动 条 ， 后 来 突然 出 现 深 动 条 的 情况 ， 此 时 页 面 的 可 用 宽度 发 生变 化 ， 水 平 大 中 重新 计算 ， 于 
致 页 面 发 生 哆 动 ， 这 个 体验 是 非常 不 好 的 。 比 较 简 单 的 做 法 是 设置 如 下 CSS: 

html { 


Overflow-y: scroll; 


' 

如 采 页 面 注定 会 很 高 ， 这 种 做 法 也 是 可 以 接受 的 ， 但 是 如 果 是 404 页 面 这 种 不 足 一 屏 蜗 度 
的 页 面 ， 右 侧 也 依然 有 个 滚动 栏 ， 那 就 有 种 回 到 解放 前 的 感觉 了 。 

这 里 分 享 一 个 可 以 让 页 面 滚 动 条 不 发 生 晃动 的 小 技巧 ， 即 使 用 如 下 CSS 代码 : 

html { 

overflow-y: scroll; /* for IE8 */ 


} 


:root 1{ 






























































overflow-y: auto; 
overflow-x: hidden; 
} 
:root body { 
position: absolute; 
l 
body { 
width: 100vw; 
overflow: hidden; 


} 
基本 上 药 到 病 除 ， 而 且 后 遗 症 非常 少 ， 大 家 不 妨 试 试 ! 
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深 动 条 是 可 以 目 定 义 的 。 因为 正 浏览 器 的 目 定 义 效果 实在 是 比 原生 的 还 要 难看 , 就 不 浪费 
大 家 时 间 了 ， 束 此 打住 。 
倒是 文 持 -webkit- 前 级 的 浏 贤 如 可 以 说 说 。 例 如 ， 对 于 Chrome 浏览 郁 : 








。 整体 部 分 ，: :-webkit-scrollbar:; 

e 两 端 按钮 ，: :-webkit-scrollbar-button; 

e。 外 层 轨 道 ，: :-webkit-scrollbar-track; 

e。 内 层 轨 道 ，: :-webkit-scrollbar-track-piece; 
e。 ”滚动 渭 块 ，: :-webkit-scrollbar-thumb; 

e 边 朋 ，::-webkit-scrollbar-corner。 

但 是 我 们 平时 开发 中 只 用 下 面 3 个 属性 : 

: : -webkit-scrollbar { /* 血 槽 宽度 */ 


width: 8px; height: 8px; 


: :~webkit-scrollbar-thumb { /* 拖 动 条 */ 
background-color: rgba(0,0,0,.3); 
border-radius: 6px; 


: :webkit-scrollbar-track 1 /* 背景 权 */ 


background-color: #ddd; 
border-radius: 6px; 


} 
在 目标 浏览 器 下 的 深 动 条 效果 束 会 如 图 6-29 所 示 这 般 。 6-29 ” 目 定 义 竣 动 条 效果 示意 
6.4.4 ”依赖 overflow 的 样式 表现 


在 CSS 世界 中 ， 很 多 属性 要 想 生 效 都 必须 要 有 其 他 CSS 属性 配合 ， 其 中 有 一 种 效果 就 离 
不 开 overflow:hiqdqen 声明 ， 即 单行 文字 浇 出 点 点 点 效果 。 虽 然 效 果 的 核心 是 text- 
overflow:ellipsis， 效 果实 现 必需 的 3 个 声明 如 下 : 








.ell1 { 
text-overflow: ellipsis; 
white-space: nowrap; 
overflow: hidden; 


} 

这 3 个 声明 缺 一 不 可 。 

上 日前， 对 -webkit- 私 有 前 级 支持 良好 的 浏览 器 还 可 以 实现 多 行文 字 打 点 效果 ， 但 是 却 无 
须 依 赖 overflow:hiddqen。 比 方 说 ， 最 多 显示 2 行内 容 ， 再 多 就 打点 的 核心 CSS 代码 如 下 : 


.Ell-rows-2 { 





display: -webkit-box; 
—webkit-box-orient: vertical; 


-webkit-line-clamp: 2; 
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6.4.5 overflow 与 锁 点 定位 


锚 点 ， 通 俗 点 的 解释 束 是 可 以 让 页 面 定 位 到 茶 个 位 置 的 点 。 其 在 高 度 较 高 的 页 面 中 经 常见 
到 , 如 百度 百科 页 面 中 标题 条 目的 快速 定位 效果 , 如 图 6-30 所 示 。 点 击 其 中 任意 一 个 标题 链接 ， 
比如 说 “发 展 历程 ” 页 面 就 会 快速 定位 到 “ 友 展 历程 ”这 一 块 内 容 ， 同 时 地 址 栏 中 的 URL 地 
址 最 后 多 了 一 个 #1， 如 图 6-31 所 示 。 




















目录 1 发 展 历程 5 语言 基础 
-< 门 《 fs 5 尾 性 和 尾 性 值 /item/ 5 © © /5 A457 
2 编程 开发 pe 《>Cio0 /item/CSS/545 礁 了 
3 语言 特点 6 语言 标准 
4 工作 原理 ee 由 发展 历 程 
图 6-30 ”百科 中 的 目录 标题 链接 条 目 图 6-31 定位 效果 与 URL 地址 变化 


我 所 知道 的 基于 URL 地 址 的 锚 链 (如 上 面 的 杠 ， 可 以 使 用 location.hash 获取 ) 实现 
锚 点 跳 转 的 方法 有 两 种 ， 一 种 是 <a> 标 签 以 及 name 属性 ， 还 有 一 种 就 是 使 用 标签 的 iq 属性 。 








百度 百科 就 是 使 用 <a> 标 签 的 name 属性 实现 锚 点 跳 转 的 ， 其 代码 如 图 6-32 所 示 。 


vxdiv class="anchor-1ist 





6-32 使 用 <a> 标 签 以 及 name 值 实现 错 点 定位 


使 用 更 精练 的 代码 表示 就 是 : 


<a href="#1"> 发 展 历 程 ></a> 





<a name="1"></a> 
束 我 个 人 而 言 ， 我 更 喜欢 使 用 下 面 的 做 法 ， 也 就 是 利用 标签 的 id 属性 ， 因 为 HTML 会 显 
得 更 干 滔 一 些 ， 也 不 存在 任何 兼容 性 问题 : 


<a href="#1"> 发 展 历程 ></a> 











<h2 id="1"> 发 展 历程 </h2> 

下 面 思考 这 两 个 问题 ， 销 点 定位 行为 是 基于 什么 条 件 触 发 的 ? 锚 点 定位 作用 的 发 生 本 质 上 
是 什么 在 起 作用 ? 

1. 锚 点 定位 行为 的 触发 条 件 

下 面 两 种 情况 可 以 触及 销 点 定位 行为 的 发 生 : 

(1)〉URL 地 址 中 的 镭 链 与 饮 点 元 素 对 应 并 有 交互 行为 ; 

(2) 可 focus 的 锁 点 元 系 处 于 focus 状态 。 

上 面 百 度 百 科 的 例子 就 是 基于 URL 地 址 的 销 链 与 销 点 实现 的 ， 定 位 效果 的 发 生 需 要 行为 
触发 。 比 方 说 ， 点 击 一 个 链接 ， 改 变 地 址 栏 的 销 链 值 ， 或 者 新 打开 一 个 链接 ， 后 面市 有 一 个 销 
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链 值 ， 当 然 前 提 是 这 个 锚 链 值 可 以 找到 页 面 中 对 应 的 元 和 水， 并且 有 是非 隐 藏 状态 ， 人 否则 不 会 有 任 
何 的 定位 行为 发 生 。 如 果 我 们 的 锚 链 就 是 一 个 很 简单 的 #， 则 定位 行为 发 生 的 时 候 ， 页 面 是 定位 
到 顶部 的 ， 所 以 我 们 一 般 实 现 返回 顶部 效果 都 是 使 用 这 样 的 HTML: 


<a href="#"> 返 回 顶部 ></a> 


然后 配合 JavaScript 实现 一 些 动 效 或 者 避免 点 击 时 候 URL 地 址 出 现 #， 而 很 多 人 实现 返回 顶部 
效果 的 时 候 使 用 的 古 类 似 下 和 面 的 HTML: 


<a href="javascript:"> 返 回 顶 部 ></a> 
然后 使 用 JavaScript 实现 定位 或 者 加 一 些 平滑 动 效 之 类 。 显 然 我 是 推荐 上 面 那 种 做 法 的 ， 因 为 
锁 点 定位 行为 的 发 生 是 不 需要 依赖 JavaScript 的 , 所 以 即使 页 面 JavaScript 代码 失效 或 者 加 载 绥 
慢 ， 也 不 会 影 啊 正常 的 功能 体验 ， 也 就 是 用 户 无 论 在 什么 状态 下 部 能 准确 地 返回 顶部 。 

“focus 锚 点 定位 ” 指 的 是 类 似 链 接 或 者 按钮 、 输 入 框 等 可 以 被 focus 的 元 素 在 被 focus 
时 发 生 的 页 面 重 定 位 现象 。 

举 个 很 简单 的 例子 ， 在 PC 端 ， 我 们 使 用 Tab 快速 定位 可 focus 的 元 素 的 时 候 ， 如 果 我 们 
的 元 素 正 好 在 屏幕 之 外 ， 浏 览 右 就 会 自动 重 定位 ， 将 这 个 屏幕 之 外 的 元 素 定 位 到 屏幕 之 中 。 再 
举 一 个 例子 ， 一 个 可 读 写 的 <input> 输 入 框 在 屏幕 之 外 ， 则 执行 类 似 下 面 的 JavaScript 代码 的 
时 候 : 


document .gqguerySelector('input').focus(); 


这 个 输入 框 会 自动 定位 在 屏幕 之 中 ， 这 些 就 是 “focus 锚 点 定位 ” 

同样 ,“focus 销 点 定位 ”也 不 依赖 于 JavaScript， 古 浏览 器 内 置 的 无 障碍 访问 行为 ,并且 
所 有 浏览 颖 都 是 如 此 。 

虽然 都 是 销 点 定位 ,但 是 这 两 种 定位 方法 的 行为 表现 还 是 有 差 寞 的 ,“URL 地 址 销 链 定位 ” 
是 让 元 素 定 位 在 浏览 器 窗 体 的 上 边缘 ， 而 “focus 锚 点 定位 ”是 让 元 素 在 浏览 器 窗 体 范围 内 显 
示 即 可 ， 不 一 定 是 在 上 边缘 。 

2. 锚 点 定位 作用 的 本 质 

锁 点 定位 行为 的 发 生 ， 本 质 上 是 通过 改变 容器 深 动 高 度 或 者 宽度 来 实现 的 。 由 于 平时 大 多 
数 页 面 都 是 垂直 滚动 ， 且 水 平 滚动 与 之 类 似 ， Re 以 垂直 滚动 示意 。 

注意 ,这 里 说 的 是 容器 的 滚动 高 上 度 ， 而 不 是 浏览 器 的 深 动 高 上 度 ， 这 一 点 小 小 区 分 非常 重要 。 
没 错 ， 非 常 重要。 由 于 我 们 平常 接触 销 点 定位 都 是 浏览 器 0 的 ， 因 此 很 容易 被 一 
些 表 象 迷 惑 而 产生 一 些 错误 的 认识 。 

首先， 销 点 定位 也 可 以 发 生 在 普通 的 容 右 元 双 上， 而 且 定 位 行为 的 友 生 是 由 内 而 外 的 。 什 
么 意思 了 呢 ? 例如， 我 们 的 页 面 上 有 一 个 <div> 元 素 设 置 了 了 overflow:auto， 且 子 元 素 高 度 超 
出 其 自身 高 度 限 制 ， 代 码 示 意 CSS 和 HTML 如 下 : 

.DOX { 


height: 120px; 
border: lpx solid #bbp; 
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Overflow: auto; 
} 
.Content { 
height: 200px; 
background-color: #eee; 
} 
<div class="box"> 
<div class="content"></div> 
<h4 id="title"> 底 部 标题 </h4> 
</div> 
<poea hraf=" Htitle ei/a</ b> 





由 于 .content 元 素 高 度 超过 .box 容器 ， 因 此 <h4> 元 素 必 然 不 可 见 ， 如 图 6-33 所 
示 。 然 后 ， 我 们 点 击 下 面 的 “点 击 测 试 ” 链 接 ， 则 滚动 条 位 置 变化 〈 实 际 上 改变 了 scro11LTop 





值 ),“ 底 部 标题 ”自动 出 现 了 ， 如 图 6-34 所 示 。 








底部 标题 
占 十 测试 占 十 测试 
图 6-33 ”标题 不 可 见 示 意 图 6-34 标题 可 见 示意 











“由 内 而 外 ” 指 的 是 ， 普 通 元 素 和 窗 体 同时 可 该 动 的 时 候 ， 会 由 内 而 外 触发 所 有 可 该 


动 窗 体 的 锚 点 定位 行为 。 继 续 上 面 的 例子 ， 假 设 我 们 的 浏览 
器 窗 体 也 是 可 滚动 鸭 ， 则 上 点击“ 点 击 测 试 ” 链 接 后 ,“ 底 部 
标题 ” 先 触发 .box 容器 的 锚 点 定位 ， 也 就 是 深 动 到 底部 ， 
然后 再 触发 窗 体 的 锚 点 定位 ,“ 底 部 标题 ”和 浏览 器 窗口 的 
上 边缘 对 齐 ， 如 图 6-35 所 示 〈( 图 中 最 上 方 一 条 线束 是 浏览 
器 窗 体 上 边缘 )。 








底部 标题 和 
点 圭 测 试 
图 6-35 ”标题 可 见 触发 两 个 可 


Pz DD 


深 动 容 右 销 皮 定位 示意 


其 次 就 是 设置 了 overflow:hidden 的 元 素 也 是 可 滚动 的 ， 这 也 是 本 小 节 的 核心 。 说 得 
更 干脆 点 儿 束 是 : overflow:hidden 跟 overflow:auto 和 overflow: scroll 的 差别 就 








在 于 有 没有 那个 深 动 条 。 元 素 设 置 了 overflow:hidden 声明 , 里 面 内 容 高 度 溢 出 的 时 候 ， 深 


动 依然 存在 ， 仅 仅 深 动人 条 不 存在 ! 








有 人 肯定 会 及 了 驶 : 不 会 呀 ， 元 素 设 置 了 overflow:hidden, 同时 高 度 洲 出 ， 我 的 鼠标 无 





论 怎么 滚 ， 都 没有 滚动 行为 发 生 啊 ! 





对 ， 你 说 的 那 是 表现 ， 表 面 看 起 来 确实 是 那样 ， 但 是 如 果 发 生 销 点 定位， 你 就 会 发 现 深 动 
发 生 了 。 还 是 上 面 的 例子 , 假设 .box 元 素 的 CSS 变 成 下 面 这 样 , overflow 属性 值 不 是 auto， 


而 是 hidden: 


.box { 
height: 120px; 
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border: lpx solid #bbp; 
overflow: hidden; 


我 们 点 击 下 面 的 “点 击 测试 ”链接 时 ， 标 题 
同样 发 生 了 重 定 位 ， 如 图 6-36 所 示 。 agi 
锚 点 定位 本 质 上 是 改变 了 scrollTop 或 





scrollLeft 值 ， 因 此 ， 上 面 的 定位 效果 等 同 于 点 击 测 
执行 了 下 面 的 JavaScript 代码 : 图 6-36 overflow:hidden 依然 锚 点 重 定位 


document .querySelector{(' .box') .scrollLTop = 200; // 随便 一 个 足够 大 的 值 即 可 

什么 ”浏览 器 的 销 点 定位 实现 了 类 似 JavaScript 的 效果 ? 那 岂 不 是 我 们 可 以 利用 这 种 兼容 
的 浏览 右 行 为 实现 更 复杂 的 无 JavaScript 的 交互 效果 ? 例如 ， 实 现 选 项 卡 切换 效果 ， 手 动 输入 
http://demo.cssworld.cn/6/4-2.php 或 者 扫 下 面 的 二 维 码 。 这 个 示例 是 基于 URL 地 址 的 销 链 触发 销 
点 定位 实现 的 选项 卡 切换 效果 。 人 例如， 点 击 切 换 按 钮 3， 效 果 如 图 6-37 所 示 。 








6-37 选项 卡 3 选中 效果 


HTML 和 核心 CSS 代码 如 下 : 


<div class="box"> 
<div class="list" id="one">1</div> 
<div class="list" id="two">2</div> 
<div class="list" id="three">3</div> 
<div class="list" id="four">4</div> 
</div> 
<div class="1link"> 
<a href="#one">1</a> 
<a href="#two">2</a> 
<a href="#three">3</a> 
<a href="#four">4</a> 
</div> 
.box { 
height: 1l10em; 
border: lpx solid #ddad; 
overflow: hidden; 
} 
.list { 
line-height: 10em; 
background: #ddg; 
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容器 设置 了 overflow:hiddqen， 且 每 个 列表 高 度 和 容器 的 高 度 一 样 高 ， 这 样 保证 永远 
只 显示 一 个 列表 。 当 我 们 点 击 按钮 ， 如 第 三 个 按钮 ， 会 改变 URL 地 址 的 锚 链 为 #three， 从 
而 触发 id 为 three 的 第 三 个 列表 发 生 的 镭 点 定位 ， 也 就 是 改变 容器 汉 动 高 度 让 列表 3 的 上 
边缘 和 深 动 容器 上 边缘 对 齐 ， 从 而 实现 选项 卡 效果 。 我 自己 画 了 个 简单 的 原理 图 ， 如 图 6-38 
所 示 。 











Q 被 #three 锚 定 


Wp 


@ 改变 滚动 高 度 
了 之” 触发 销 点 定位 





图 6-38 ” 锚 点 定位 实现 选项 卡 原理 示意 


此 效果 乍 一 看 很 酷 ， 但 却 有 不 少 不 足 之 处 : 其 一 ， 容 器 高 度 需 要 固定 ; 其 二 ， 也 是 最 麻烦 
的 ， 就 是 “由 内 而 外 ”的 销 点 定位 会 触发 窗 体 的 重 定 位 ， 也 就 是 说 ， 如 果 页 面 也 是 可 以 深 动 的 ， 
则 点 击 选 项 卡 按钮 后 页 面 会 发 生 跳动 , 这 种 体验 显然 是 非常 不 好 的 。 那 有 没有 什么 解决 办 法 呢 ? 

有 ， 还 记 不 记得 前 和 面 提 过 有 两 种 方法 可 以 触发 销 点 定位 ， 其 中 有 一 种 方法 就 是 “focus 销 
点 定位 ”只 要 定位 的 元 系 在 浏览 器 窗 体 中 ， 束 不 会 触发 窗 体 的 深 动 ， 也 就 是 选项 卡 切换 的 时 候 
页 面 不 会 有 友 生 跳动 。 

访问 基于 “focus 销 点 定位 ”实现 的 无 JavaScript 选项 卡 切换 效果 实例 页 面 ， 手动 输 
入 http://demo.cssworld.cn/6/4-3.php 或 者 扫 下 面 的 二 维 码 。 点 击 切换 按钮 3, 效果 如 图 6-39 
所 示 。 











图 6-39 ”选项 卡 3 选中 效果 
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可 以 发 现 ， 就 算 页 面 窗 体 束 有 滚动 条 ， 绝 大 多 数 情 况 下 ， 也 都 不 会 发 生 跳 动 现象 ，HTML 
和 核心 CSS 代码 如 下 : 


<div class="box"> 
<div class="list"><input id="one">1</div> 
<div class="list"><input id="two">2</div> 
<div class="list"><input id="three">3</div> 
<div class="list"><input id="four">4</div> 
</div> 
<div class="]ink"> 
<label class="click" for="one">1</label> 
<label class="click" for="two">2</label> 
<label class="click" for="three">3</label> 
<label class="click" for="four">4</label> 
</div> 
.box { 
height: 10em; 
border: lpx solid #ddad; 
overflow: hidden; 




















lj 
ee ee 
height: 100%; 
background: #ddg; 
Position: relative; 
} 
.list > input { 
position: absolute; top:0; 
height: 100%; width: lpx; 
border:0; padding: 0; margin: 0; 
clip: rect(0 0 0 0) 7; 
| 


原理 其 实 很 简单 ， 束 是 在 每 个 列表 里 军 入 一 个 肉眼 看 不 见 的 <input> 输 入 框 ， 然 后 选项 卡 
按钮 变 成 <Labe1> 元 素 ， 并 通过 for 属性 与 <input> 输 入 框 的 id 相关 联 ， 这 样 ， 点 击 选 项 按 
钮 会 角 父 答 作 秆 的 focus 行为 ， 触 发 销 点 定位 ， 实 现 选 项 卡 切换 效果 。 

这 种 原理 实现 的 选项 卡 还 有 一 个 优点 就 是 ， 我 们 可 以 直接 使 用 Tab 键 来 切换 、 浏 览 各 个 选 
项 面板 的 内 容 ， 传 统 的 选项 卡 实 现 并 没有 如 此 便捷 的 可 访问 性 。 

然而 ， 上 面 这 种 技术 要 想 用 在 实际 项 目 中 还 离 不 开 JavaScript 的 支持 ， 一 个 是 选项 卡 按 钮 
的 选中 效果 ， 男 一 个 就 是 处 理 列表 部 分 区 域 在 浏览 器 外 面 时 依然 会 跳动 的 问题 。 相 关 处 理 类 似 
下 面 的 做 法 ， 即 使 用 jQuery 语法 ，: 











$s('label.click') .removeAttr('for') .on('click', function() ({ 
S(O ) SerollTon(he 'xxx' 表示 深 动 数值 


}); 


于 是 ,就算 JavaScript 出 现 异 常 或 者 加 载 缓慢 ， 选项 卡 点 击 功 能 依然 正常 ， 并 且 直 接 用 Tab 
键 浏览 选项 卡 内 容 的 超级 便捷 的 可 访问 性 也 保留 下 来 了 。 综 合 来 看 ， 这 是 非常 不 错 的 一 种 选项 
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卡 实现 技巧 ， 这 种 技巧 实际 上 是 我 自己 私 藏 的 专利 小 技术 ， 这 里 首次 公开 。 

同样 ， 这 一 技术 只 适用 于 高 度 固定 的 选项 卡 效果 ， 如 各 大 站 点 站 页 经 常 出 现 的 幻灯 片 广告 
切换 效果 等 。 

实际 上 上， 如果 不 用 考虑 IE8 浏览 器 ， 可 以 利用 :checked 伪 类 、 单 选 按 钮 和 <1label> 标 签 
的 点 击 行为 实现 选项 卡 切 换 ， 由 于 本 书 知识 点 面 回 IE8 及 以 上 版 本 的 浏览 器 ， 因 此 这 一 技术 不 
做 详细 介绍 。 

知道 overflow:hidden 元 系 依 然 可 以 滚动 , 除了 可 以 帮助 我 们 实现 无 JavaScript 的 选项 
卡 效 果 外 ， 还 可 以 帮助 我 们 理解 一 些 现象 发 生 的 原因 。 例 如 ， 我 之 前 提 到 过 的 使 用 margin- 
bottom 负 值 加 padding-bottom 正 值 以 及 父 元 素 overflow:hiqdden 配合 实现 的 等 高 布 
局 ,在 大 多 数 情 况 下 ,这 种 布局 使 用 是 没有 任何 问题 的 ,但 是 如 果 使 用 dom.scrollIntoView () 
或 者 触发 窗 体 视 区 范围 之 外 的 内 部 元 素 的 锁 点 定位 行为 ， 布 局 就 会 飞 掉 ， 没 错 ， 布 局 就 像 长 了 
对 膛 一 样 飞 掉 了 。 因 为 ， 此 时 容器 的 scrollHeight ( 视 区 高 度 + 可 深 动 高 度 ) 要 远 远 大 于 
Clliencnergnt ( 视 区 高 度 )， 而 销 点 定位 的 本 质 就 是 改变 容器 的 深 动 高 度 ， 因 此 ， 容 右 的 深 
动 高 度 不 是 0， 发 生 了 与 上 面 无 JavaScript 的 选项 卡 类 似 的 效果 ， 产 生 布局 问题 。 

就 我 自己 的 切 映 体会 而 言 ， 时 刻 牢记 overflow:hidden 元 素 依然 可 以 滚动 这 一 点 ， 可 
以 让 我 们 以 更 简单 、 更 原生 的 方式 实现 一 些 交 互 效果 。 举 个 例子 ， 实 现 自 定义 的 滚动 条 效果 ， 
因为 Windows 系统 下 浏览 器 的 深 动 条 会 占据 宽度 ， 而且 长 得 不 好 看 ， 所 以 就 存在 实现 自 定义 深 
动 条 的 需求 ， 也 就 是 类 似 移动 端的 悬浮 式 滚动 条 。 

传统 实现 都 是 父 容器 设置 overflow:hidden， 然 后 子 元 素 使 用 一 个 大 的 <div> 包 起 来 ， 
设置 绝对 定位 ， 然 后 通过 改变 top 值 ， 或 者 使 用 transform 进行 偏 移 。 

但 是 在 我 看 来 ， 最 推荐 的 实现 还 是 基于 父 容器 自身 的 scrollTop 值 改变 来 实现 目 定义 深 
动 条 效果 ， 其 好 处 有 如 下 这 些 。 

(1) 实现 简单 ， 无须 做 边界 判断 。 因 为 就 算 scrollTop 设 为 -999， 浏 览 器 依然 按照 0 来 
泻 染 ， 要 想 滚 动 到 底部 ， 直 接 一 个 很 大 的 scrollTop 值 就 可 以 了 ， 无 须 任何 计算 。 例 如 : 


container.scrollTop = 99999 1; 


列表 滚动 了 多 少 直 接 就 是 scrollTop 值 ， 实 时 获取 ， 天 然 存 储 。 传 统 实现 要 变量 以 及 边 
界 更 新 ， 很 哆 嗓 。 

(2) 可 与 原生 的 scroll 事件 天 然 集成 ， 无 颖 对 接 。 例 如 ， 我 们 的 深 动 延迟 加 载 图 片 效 果 
就 可 以 直接 应 用 ， 因 为 图 片 位 置 的 计算 往往 都 是 和 scrollTop 值 相 关联 的 ， 所 以 传统 实现 
scrollTop 值 一 直 是 0， 很 可 能 导致 这 类 组 件 出 现 异 常 。 

(3) 无 须 改变 子 元 素 的 结构 。 传 统 实现 为 了 定位 方便 ， 会 给 所 有 的 列表 元 素 外 面包 一 层 独 
了 的 <qiv> 元 际 ， 这 可 能 会 导致 某 些 选择 器 〈 类 似 于 .container > .1ist{}) 失效 ， 但 是 ， 
基于 父 容器 本 里 的 scrollTop 滚动 实现 则 无 此 问题 ， 即 使 子 元 素 全 是 兄弟 元 素 也 是 可 以 的 。 

当然 , 没有 哪 种 技术 是 万 能 的 , 基于 改变 overflow:hidden 父 容器 的 scrollTop 实现 
自 定 义 滚 动 条 效果 也 有 几 点 不 足 : 一 是 无 法 添加 类 似 Bounce 回 弹 这 种 动 效 ; 二 是 泻 染 要 比 一 
般 的 泻 染 慢 一 些 ， 但 大 多 数 场 景 下 用 户 都 是 无 感知 的 。 
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大 家 可 根据 自己 项 目的 实际 情况 目 行 取舍 ， 选 择 合适 的 技术 。 


6.5 float 的 匈 吕 position:absolute 


找 一 下 认为 BositionabgsolUute( 下 倍 称 absolute) 机 float:left/float:right 
(下 简称 float) 是 兄 第 关系 ， 都 兼 具 “ 块 状 化 ”“ 包 于 性 ”“ 破 坏 性 ”等 特性 ， 不 少 布局 场合 
甚至 可 以 相互 蔡 代 。 有 人 可 能 会 疑惑 : 一 个 属性 名 是 position， 一 个 是 float,“ 姓 ”都 不 
一 样 ， 还 郊 种 呢 ? 

实际 上 是 这 样 的 ，absolute 和 float 可 以 看 作 是 “ 同 父 异 母 ”的 兄弟 关系 。 它 们 的 父 
杀 是 同一 个 人 人， 是 CSS 世界 的 大 魔王 ， 属 于 魔界 ; 但 母 杀 不 是 一 个 人 ，absolute 的 母 杀 来 目 
魔界 ， 而 float 的 母亲 来 自 人 界 。 

但 是 ，absolute 从 不 承认 它 有 一 个 半 魔 半 人 的 兄弟 float， 两 人 是 水 火 不 容 。 由 于 
absolute 血脉 更 纯 ， 能 力 更 霸道 ， 因 此 ， 当 apsolute 和 float 同时 存在 的 时 候 ，float 
属性 是 无 任何 效 末 的 。 因 此 ， 没 有 任何 理由 apsolute 和 float 同时 使 用 : 














.Drother 1{ 
Position: absolute; 
float: left; /7 无 效 


虽然 嘴 上 不 承认 ， 但 事实 摆 在 那里 ， 机 多 共性 ， 这 兄弟 关系 是 跑 不 了 了 。 

例如 ,“ 块 状 化 ”和 译 动 类 似 ， 元 素 一 旦 position 属性 值 为 absolute 或 fixed， 其 
display 计算 倩 各 是 DloGKE 或 者 taBle。 例 如，<8Ban> 元 厅 叶 认 古 inline 水 平 ， 但 总 一 
日 设置 position:absolute， 其 display 计算 值 就 变 成 了 block， 我 们 可 以 使 用 简单 的 
JavaScript 代码 验证 上 面 的 观点 。 打 开 浏 览 器 控制 台 ， 输 入 如 下 JavaScript 代码 : 


Var Span = document.createElement ('span');) 








document .body.appendChild(span); 
console.1log('1. ' + window.getComputedStyle (span) .display); 
// 设置 元 系 绝 对 定位 


span.style.position = "absolute ' ， 





console.1log('2. ' + winaqaow.getComputedqStyle (Span) .display); 


执行 后 的 结果 如 图 6-40 所 示 。 
又 比方 说 “破坏 性 ” 指 的 是 破坏 正 稼 的 流 ratio tren 


ensole.iog( "+ 


特性 。 和 float 类 似 ， 虽然 apsolute 破坏 正 aspectstSpa mismon): 

常 的 流 来 实现 自己 的 特性 表现 , 但 本 身 还 是 受 普 A 

通 的 流体 元 素 布局 、 位 置 其 至 一 些 内 联 相关 的 es 

CSS 属性 影响 的 , 这 部 分 内 容 会 在 6.5.2 节 介 Bea 
又 比方 说 两 者 都 能 “ 块 状 格式 化 上 下 文 ”， 


也 就 是 BEFC。 
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又 比方 说 两 者 都 具有 “ 包 应 性 ” 也 就 是 尺寸 收缩 包 襄 ， 同 时 具有 自 适 应 性 。 有 些 人 知道 
display:inline-block 声明 具有 “ 包 囊 性 ” 和 希望 绝对 定位 元 素 也 如 此 ， 就 有 了 下 面 这 样 
的 设置 : 
.wrap { 
display: inline-block; // 没有 必要 
position: absolute; 


| 

实际 上 absolute 天 然 具 有 “ 包 囊 性 ” 因此 没有 必要 使 用 display:inline-block, 
如 条 要 让 元 系 显 示 或 者 “无 依赖 定位 史 可 以 试 试 更 简短 的 display:inline。 但 是 , 和 float 
或 其 他 “ 包 囊 性 ”声明 带 来 的 “ 目 适 应 性 ” 相 比 ，absolute 有 一 个 平时 不 太 补 人 注意 的 差异 ， 
那 承 是 absolute 的 自 适 应 性 最 大 宽度 往往 不 是 由 父 元 素 决 定 的 , 本 质 上 说 , 这 个 差异 是 由 “ 包 
含 块 ”的 差异 决定 的 。 换 句 话说 ，absolute 元 素 具 有 与 众 不 同 的 “包含 块 ”。 


6.5.1 absolute 的 包含 块 


包含 块 〈containing block) 这 个 概念 实际 上 大 家 一 直 都 有 接触 ， 束 是 元 素 用 来 计算 和 定位 
的 一 个 框 。 比 方 说 ，widqth:505， 也 就 是 宽度 一 半 ， 那 到 展 是 哪个 “元 素 ” 宽 度 的 一 半 呢 ? 注 
意 ， 这 里 的 这 个 “元 素 ” 实 际 上 就 是 指 的 “包含 块 "””。 有 经 验 的 人 应 该 都 知道 ， 普 通 元 素 的 百 分 
比 宽度 是 相对 于 父 元 素 的 content box 宽度 计算 的 ， 而 绝对 定位 元 素 的 宽度 是 相对 于 第 一 个 
position 不 为 static 的 祖先 元 素 计算 的 。 实 际 上 ， 大 家 已 经 和 “包含 块 ” 打 过 交道 了 ， 对 
于 这 些 计算 规则， 规范 是 有 明确 定义 的 ， 上 基体 如 下 〔 殊 除 了 不 第 用 的 部 分 内 容 )。 

(1) 根 元 素 ( 很 多 场景 下 可 以 看 成 是 <html>) 被 称 为 “初始 包含 块 ”， 其 尺寸 等 同 于 浏览 
器 可 视窗 口 的 大 小 。 

(2) 对 于 其 他 元 素 ， 如 果 该 元 素 的 position 是 relative 或 者 static， 则 “包含 块 ” 
由 其 最 近 的 块 容器 祖先 盒 的 content box 边界 形成 。 

(3) 如 果 元 素 position:fixed， 则 “包含 块 ” 是 “初始 包含 块 ”。 

(4) 如 果 元 素 position:absolute， 则 “包含 块 ” 由 最 近 的 position 不 为 static 
的 祖先 元 素 建 立 ， 上 其 体 方式 如 下 。 


如 果 该 祖先 元 素 是 纯 inline 元 素 ， 则 规则 略 复杂 : 
。 假设 给 内 联 元 素 的 前 后 各 生成 一 个 宽度 为 0 的 内 联 盒子 (inline box ), 则 这 两 
个 内 联 盒子 的 padding box 外 面 的 包围 盒 就 是 内 联 元 素 的 “包含 块 ?; 
e。 如果 该 内 联 元 素 被 跨行 分 割 了 ， 那 么 “包含 块 ” 是 未 定义 的 ， 也 就 是 CSS2.1 
规范 并 没有 明确 定义 ， 浏 览 器 自行 发 挥 。 
否则 , “包含 块 ” 由 该 祖先 的 padding box 边界 形成 。 


如 果 没 有 符合 条 件 的 祖先 元 素 ， 则 “包含 块 ” 是 “初始 包含 块 ”。 
可 以 看 到 ， 和 常规 元 素 相 比 ，apbsolute 绝对 定位 元 素 的 “包含 块 ” 有 以 下 3 个 明显 差异 : 



























































6.5 float 的 兄弟 position:absolute 179 


(1)〉 内 联 元 素 也 可 以 作为 “包含 块 ” 所 在 的 元 取 ; 

(2)“ 包 含 块 ”所 在 的 元 素 不 是 父 块 级 元 素 ， 而 是 最 近 的 position 不 为 static 的 祖先 
元 系 或 根 元 系 ; 

(3) 边界 是 padding box 而 不 是 content box。 

首先 讲 第 一 点 兰 异 ， 也 残 是 内 联 元 素 可 以 作为 “包含 块 ”。 这 一 点 估计 很 多 人 都 不 知道 ， 
因为 平时 使 用 得 少 。 为 何平 时 用 得 少 ? 原因 如 下 。 

(1) 我 们 一 旦 使 用 absolute 绝对 定位 ， 基 本 上 都 是 用 来 布局 ， 而 内 联 元 妹 主要 的 作用 是 
图 文 展 示 ， 所 谓 道 不 同 不 相 为 谋 ， 因 此 两 者 很 难 竣 到 一 块 儿 。 

(2) 理解 和 学 习 成 本 比较 高 。 内 联 元 素 的 “包含 块 ” 不 能 按照 弟 规 块 级 元 了 素 的 “包含 块 ” 
来 理解 。 举 个 例子 ， 如 下 HTML 代码 : 

<span style="position:relative;"> 

我 是 <pig style="font-size:200%; "> 字号 很 大 </big> 的 文字 ! 

</span> 
其 效果 如 图 6-41 所 示 。 请 问 : 此 时 <span> 元 素 的 “包含 块 ” 范 围 是 什么 ? 

如 果 对 定义 理解 不 够 ， 很 容易 误 认为 包含 抉 的 上 下 边缘 被 其 中 “字号 很 大 ”的 <big> 元 素 
给 撑 大 了 。 实 际 上 ， 此 时 元 素 的 “包含 块 ” 施 围 与 <bpig> 元 素 品 无 关系 ， 束 算 其 字号 大 小 设置 
得 再 大 ,“ 包 售 块 ”范围 依然 是 图 6-42 虚线 所 示 的 那么 大 。 原 因 很 简单 ， 内 联 元 又 的 “包含 块 ” 
是 由 “生成 的 ”前 后 内 联 盒子 决定 的 ， 与 里 面 的 内 联 盒子 细节 没有 任何 关系 。 


庶 杠 是 “包含 块 ” 























em 用 = 天 1 国生 生殖 下 ARE 
我 是 子 写 1 民 大 mx ! 我 是- 天 号 丰 民 大 A 的 文字 上 7 
图 6-41 简单 的 文字 呈现 效果 图 6-42 ”实际 的 “包含 块 ” 范 围 大 小 


我 根据 目 己 的 进一步 测试 发现 , 内 联 元 素 的 “包含 块 ” 可 以 受 : :first-line 伪 元 素 影响 ， 
但 不 受 : :first-letter 伪 元 素 影 啊 。 

可 以 看 出 ， 内 联 元 系 的 “包含 块 ” 范 围 相对 稳 国 ， 不 会 受 Line-height 等 属性 影 啊 ， 
此 ， 理 论 上 其 还 是 有 实用 价值 的 。 

(3) 兼容 性 问题 。 无 论 内 联 元 素 是 里 行 还 是 跨行 都 存在 兼容 性 问题 。 单 行 的 兼容 性 问题 存 
在 于 “包含 块 ” 是 一 个 空 的 内 联 元 系 的 时 候 。 例 如 ， 按 照 我 们 的 理解 ， 下 面 的 代码 实现 的 效果 
应 该 是 图 片 在 容 右 的 右上 角 对 齐 : 


<p> 








<span> 
<img src="1 .jpg"> 
</span> 
</p> 


p { text-align: right; } 
bp > Span 4 Dositionm: Felativey .| 
p > span > img ({ 
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position: absolute; 
right: 0; 
} 


但 是 根据 我 的 测试 ， 在 IE8 至 E10 浏览 姻 下 ， 图 片 完 全 在 <p> 容 鼎 的 左 侧 外 部 显示 了 ，IE 
Edge 中 则 无 此 问题 。 需 要 给 空 的 <span> 元 素 设 置 border 或 padding 让 “幽灵 空白 节点 ” 














显现 或 者 直接 插入 字符 才能 表现 一 致 。 度 枢 是 “包含 块 ” 
皮 行 的 妆 突 性 问 显 见 范 对 此 行为 并 未 定义 ， 导 致 ”.. = ; 

跨行 的 兼容 ET A 导致 匠 所 字号 很 大 WW 六 1 

浏览 右 在 实现 上 各 有 兰 民 。 主 要 差异 在 于 ，Firefox 浏览 旧 ”我 是 第 二 行内 容 . FUurefox 截 国 





的 “包含 块 ” 仅 覆盖 第 一 行 ， 而 下 和 Chrome 浏览 器 “ 包 
99 Pe Ar NA 和 大 大 /一 三 | /一 家 字号 很 大 | 
含 块 ” 的 表现 完全 符合 定义 ， 由 第 一 行 开头 和 最 后 一 行 结 斩 症 子 写 代 八 的! 
尾 的 内 联 盒子 共同 决定 。 差 异 如 图 6-43 所 示 。 时 本 Co 站 
个 人 认为 ， 卫 〈 包 括 IE8) 和 Chrome 浏览 器 的 泻 染 规 i ns 
\ 丛 ‘~ ye > 全 二 Hb bz, DD 几 系 局 六 
则 是 更 准确 的 ， 但 这 种 泻 染 可 能 会 带 来 另外 一 个 疑惑 : 如 
果 内 联 元素 最 后 一 个 内 联 盒子 的 右边 缘 比 第 一 个 内 联 盒子 的 左边 缘 还 要 靠 左 ， 那 岂 不 是 “包含 
块 ” 宽 度 要 为 负 了 ? 眼见 为 实 ， 例 如 ， 我 们 修改 一 下 HTML， 让 “包含 块 ” 从 后 面 的 文字 开始 
算 起 : 


我 是 <616 stvle="font-81i2e:200%;)"3 学 守候 大 </Big> 
<apan Style="D0OSition GIVE "> 的 文字 ! 我 是 第 二 行内 容 s </8panS> 


结果 “包含 块 ” 的 宽度 按照 0 来 处 理 了 ， 起 始 位 置 为 第 一 个 内 联 盒子 所 在 的 位 置 ， 如 图 6-44 
所 示 。 = on 
然后 讲 第 二 点 差异 ， 也 就 是 绝对 定位 元 素 计算 的 容器 8 了 号 很 人 xz 
是 第 一 个 position 不 为 static 的 祖先 元 素 。 这 个 很 多 
人 知道 ， 因 为 平时 left、top 定位 用 得 很 频繁 ， 用 着 用 
着 束 知 道 了 百分比 客 度 、 高 度 以 及 定位 什么 的 和 普通 元 素 不 一 样 。 这 也 衍生 出 了 男 外 一 个 有 意 
思 的 小 问题 ， 就 是 neight:100% 和 neignt:inherit 的 区 别 。 对 于 普通 元 素 ， 两 者 确实 没 
什么 区 别 , 但 是 对 于 绝对 定位 元 素 就 不 一 样 了 。 height :100s 是 第 一 个 具有 定位 属性 值 的 祖先 
元 素 的 高 度 ， 而 height:inherit 则 是 单纯 的 父 元 系 的 高 度 继承 ， 在 某 些 场景 下 非常 好 用 。 
然后 束 是 很 多 人 并 没有 注意 到 的 ,， 也 是 本 节 的 重点 内 容 ， 那 就 是 绝对 定位 元 素 的 “ 包 于 性 ” 
中 的 “宽度 目 适 应 性 ”其 实 也 是 相对 于 “包含 块 ” 来 表现 的 。 
我 们 先 从 一 个 简单 的 例子 说 起 ， 代 码 如 下 : 


.box { position: absolute; } 
<div Class="DoOx "> 内 容 </bDOx> 


请 问 : .box 元 素 的 览 度 是 多 少 ? 文字 会 换行 吗 ? 如 果 .box 元 素 中 有 满 满 1000 个 汉字 ， 
文字 会 换行 吗 ? 如果 换行 ， 在 哪里 换行 ? 

很 饮 单 的 例子 ， 很 饮 蛙 的 问题 ， 但 古 能 够 准确 地 回答 清楚 的 人 忍 怕 并 不 多 。 

在 通常 场景 下 ，.box 元 系 沉 度 就 是 里 而 文字 的 宽度 ， 不 会 换行 ， 随 着 文字 越 来 越 多 ， 如 














图 6-44 “包含 块 ” 表 现 为 宽度 0 示意 
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果 文 字 足 够 多 ，.pbox 元 素 宽度 会 越 来 越 大 ， 但 是 不 会 无 限制 大 下 去 ， 因 为 超过 一 定 限 制 是 会 
目 动 换行 的 ， 而 这 个 限制 就 是 .box 元 素 的 “包含 块 ”。 
注意 这 里 的 几 个 措 样 ， 第 一 个 是 “通常 场景 下 ”， 第 二 个 是 “会 自动 换行 “会 自动 换行 ” 
说 的 就 是 “ 包 奢 性 ”中 的 “宽度 上 自 适 应 性 ”。 举 个 简单 的 例子 , 假设 .pox 元 素 有 一 个 宽度 200px 
同时 position 为 relative 的 容器 元 素 ，CSS 代码 如 下 : 
.Container { 
width: 200px; 
border: lpx solid; 
Position: relative; 


} 


.box { position: absolute; |】 


同时 .box 元 素 里 面 的 文字 内 容 非常 多 , 此 时 ，. box 元 素 的 “包含 块 ”就 是 .container 元 素 ， 
因此 ，.box 元 素 最 终 的 宽度 就 是 200px( 见 图 6-45)， 也 就 是 说 ， 绝 对 定位 元 素 默认 的 最 大 帘 
度 就 是 “包含 块 ”的 宽度 ， 

.container 高 度 塌 陷 是 因为 absolute 破坏 了 正常 的 CSS 流 ， 此 乃 “ 破 坏 性 ”， 宽 度 被 
relative 限制 在 最 大 200px， 此 乃 “ 包 于 性 ” 因此， 对 于 弹 框 这 种 绝对 定位 或 固定 定位 的 
元 素 是 没有 必要 设置 max-width:100% 的 : 




















dialog { 
Position: absolute; 
max-width: 100%; /* 多 余 */ 
} 
而 “通常 场景 下 ”说 的 是 ， 有 可 能 我 们 的 “包含 块 ”( 或 者 “包含 块 ” 剩 余 的 空间 〉 小 到 
不 足以 放下 “文字 内 容 ” 这 4 个 汉字 。 于 是 ， 一 些 “ 怪 异 ” 的 现象 就 很 好 理解 了 ， 比 方 说 纯 CSS 
定位 或 JavaScript 计算 定位 实现 的 提示 效果 一 柱 擎 天 的 问题 。 
先 看 CSS 实现 ， 演 示 地 址 为 http://demo.cssworld.cn/6/5-1.php。 我 们 的 目标 效果 是 鼠标 
hover 图 标 出 现 类 似 于 如 图 6-46 所 示 的 效果 。 


文字 内 容 。 当 绝对 定位 元 素 没 有 
设置 席 度 相关 属性 的 时 候 ， 其 竞 





pe 





度 由 里 面 的 元 素 和 外 面 的 “包含 
块 同时 决定 。 
由 


6-45 “ 包 囊 性 ”与 “包含 块 ” 6-46 ”计划 实现 的 提示 效果 
我 们 可 以 利用 : :before 和 ::after 伪 元 素 实现 我 们 想 要 的 效果 ， 一 个 实现 三 角 ， 一 个 
实现 窍 形 区 。 为 了 不 干扰 布局 ， 显 然 实现 提示 效 末 的 两 个 伪 元 素 会 使 用 absolute 绝对 定位 ， 
为 了 定位 准确 ， 我 们 会 给 小 图 标 元 素 设置 position:relative。 此 时 问题 来 了 : 由 于 提示 信 
轧 的 内 容 有 长 有 短 ， 我 们 不 可 能 给 提示 元 系 设 置 一 个 特定 的 宽度 ， 于 是 宽度 表现 走 “ 包 囊 性 ” 
也 就 是 最 大 宽度 不 超过 “包含 块 ” 的 宽度 ， 但 是 恰好 此 时 “包含 块 ” 就 是 我 们 的 小 图 标 元 又 ， 
并 且 和 宽度 往往 都 不 超过 20 像 系 ， 也 融 是 我 们 的 提示 信息 只 能 够 在 20 像素 宽 的 区 域内 显示 ， 这 
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残 导 致 了 最 终 的 文字 内 容 “ 一 柱 擎 天 ” 如 图 6-47 所 示 。 

要 修复 这 一 问题 其 实 很 简单 , 只 要 改变 默认 的 宽度 显示 类 型 就 可 以 , 添加 white-space: 
nowrap， 让 宽度 表现 从 “ 包 于 性 ” 变 成 “最 大 可 用 宽度 ” 点 击 演示 页 面 的 删除 图 标 可 看 到 修 
复 “ 一 柱 擎 天 ”问题 后 的 效果 。 

绝对 定位 元 素 “ 包 庄 性 ”的 “包含 块 ” 限 制 不 仅 出 现在 宽度 不 足 的 时 候 ， 有 时 候 残 算 “ 包 
含 块 ” 的 宽度 足够 大 ， 也 依然 会 出 现 “ 一 柱 擎 天 ”眼见 为 实 ， 还 是 提示 信息 效果 ， 不 过 这 次 我 
们 使 用 JavaScript 实现 , 黑色 提示 条 相关 的 HTML 内 容 直 接 插入 <body> 标 签 中 , 此 时 “包含 块 ” 
的 宽度 就 是 浏览 器 窗 体 的 宽度 ， 按 道理 讲 ， 是 不 会 出 现 “ 一 柱 擎 天 ”效果 的 ， 但 是 人 算 不 如 天 
算 ， 不 该 及 生 的 还 是 发 生 了 ! 

演示 地 址 为 http:Wdemo.cssworld.cn/6/5-2.php 。 当 我 们 的 小 图 标 在 浏览 器 窗 体 靠近 右 侧 边 缘 
的 时 候 ,， “一 柱 擎 天 ”的 莫 剧 同样 发 生 了 ， 如 图 6-48 所 示 。 


y 8 























图 6-47 被 “包含 块 ” 限 制 的 6-48 ”被 “包含 块 ” 限 制 的 
一 柱 擎 天 效果 (CSS 版 ) 一 柱 敬 天 效果 (JavaScript 版 》 





原因 不 难 理解 。 虽 然 说 黑色 的 提示 元 素 的 “包含 块 ” 宽 上 度 是 整个 浏览 器 窗 体 宽度 ， 放 几 个 
文字 绰 弹 有 余 ， 但是， 由 于 我 们 的 图 标 位 于 浏览 器 的 右边 缘 ，JavaScript 定位 的 时 候 ， 束 会 设置 
一 个 很 大 的 left 属性 值 ， 导 致 “ 包 含 块 ” 剩 余 的 空间 不 足 ， 也 就 是 提示 元 系 的 “ 自 适 应 宽度 ” 
不 足 ， 导 致 文字 只 能 竖 着 显示 ， 从 而 出 现 “ 一 柱 擎 天 ” 

要 修复 此 问题 其 实 很 简单 ， 只 要 改变 默认 的 宽度 显示 类 型 就 可 以 ， 添加 white-space: 
nowrap， 让 宽度 表现 从 “ 包 时 性 ” 变 成 “最 大 可 用 宽度 ”点 击 演示 页 面 的 删除 图 标 可 看 到 修 
复 “ 一 柱 擎 天 ”问题 后 的 效果 。 当 然 ， 实 际 开 发 的 时 候 ， 最 好 改变 提示 的 方向， 例如 右边 缘 的 
时 候 ， 左 侧 提 示 。 

最 后 讲 第 三 点 差 寞 ， 也 就 是 计算 和 定位 是 相对 于 祖先 定位 元 系 的 padding box。 为 何 绝对 定 
位 的 定位 要 相对 于 padding box 呢 ? 这 其 实 和 overflow 隐藏 也 是 padding box 边界 类 似 ， 都 是 
由 使 用 场景 决定 的 。 

举 个 例子 ， 在 移动 端 ， 为 了 实现 民 好 的 视 沉 感受， 列表 或 者 模块 的 信息 内 容 主体 距 离 窗 体 
两 侧 都 有 一 定 的 空白 , 这 个 空白 一 般 都 会 使 用 padding 撑 开 的 ， 而 不 是 margin， 原 因 在 于 这 
些 列表 是 链接 ， 外 部 一 定 会 使 用 <a> 元 素 ， 而 为 了 准确 反馈 啊 应 区 域 ，<a> 元 素 在 tap 的 时 候 
会 由 加 深 的 背景 块 示意 (参见 微 信 列表 tap 时 候 的 反馈 )， 所以， 如 果 左 右 的 间距 使 用 margin 
撑 开 ， 吏 会 出 现 列表 的 点 击 反 馈 背 景区 域 左右 边 距 透明 的 问题 ， 视 党 效果 和 体验 都 是 不 好 的 ， 
因为 margin box 永远 是 透明 的 。 

现在 来 需求 了 : 需要 在 列表 或 者 模块 的 右上 角 显 示 一 个 明显 的 标签 ， 如 “精华 ”“ 星 冠 ” 
之 类 。 此 时 ， 我 们 无 须 任何 计算 ， 直接 使 用 数值 0 定位 在 列表 的 右上 角 即 可 ， 代 码 示 意 如 下 : 
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.list { 
padding: lrem; 

} 

.tag { 
position: absolute; 
top: 0; right: 0; 

} 


但 是 ， 如 果 我 们 的 定位 是 相对 于 content box 计算 的 ， 则 CSS 代码 应 该 类 似 这 样 : 


:St 1 
padding: lrem; 

} 

.tag { 
Position: absolute; 
top: lrem; right: lrem; 


} 

看 上 去 好 像 没 什么 问题 ， 但 实际 上 增加 了 我 们 日 后 开发 维护 的 成 本 ， 因 为 绝对 定位 元 素 的 
定位 值 和 列表 容器 的 paddqing 值 耘 合 在 一 起 了 : 当 我 们 对 paqding 间距 进行 调整 的 时 候 ， 缀 
对 定位 元 又 的 *ight、top 值 也 一 定 要 跟着 一 起 调整 ， 否 则 就 会 出 现 样式 问题 ， 而 实际 开发 的 
时 候 ， 起 记 调 整 绝对 定位 元 系 的 定位 值 是 非常 常见 的 ，bug 继而 出 现 。 

对 一 个 项 目 而 言 ， 间 距 并 非 一 成 不 变 ， 列 表 间 的 上 下 左右 间距 会 因为 内 容 或 者 场景 的 不 同 
而 不 同 ， 这 就 导致 每 一 次 出 现 有 差异 的 布局 ， 我 们 部 需要 重新 额外 写 一 个 定位 样式 。 例 如 : 

TS 

padding: .75rem; 
} 


.tag—2 { 
position: absolute; 




















top: .7/5rem; right: .7rem; 
} 


这 显然 增加 了 一 定 的 开发 成 本 。 而 相对 于 padding box 定位 ， 列 表 的 padding 属性 值 是 多 
少 对 我 们 的 样式 表现 没有 任何 影响 。 眼 见 为 实 ， 扫 下 面 的 二 维 码 访问 。 点 击 列 表 下 面 的 按钮 改 
变 列表 的 padqing 值 大 小 会 发 现 ， 我 们 的 标签 在 右上 角 微 丝 不 动 ， 如 图 6-49 所 示 。 




















标题 3 
2 > 
| 改变 列表 padding 大 小 \ 











6-49 padding 变 大 后 绝对 定位 元 素 位 置 依旧 稳固 
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然而 ， 实 际 项 目 场景 干 变 万 化 ， 有 时 候 ， 我 们 需要 的 效果 并 不 是 定位 在 列表 的 边缘 ， 而 是 
定位 在 内 容 的 边缘 ， 很 多 人 不 假 思 索 就 直接 使 用 类 似 下 面 的 代码 实现 : 


.list { 





padding: lrem; 

} 

.tag { 
position: absolute; 
top: lrem; right: lrem; 


} 

效果 里 然 达成 了 ， 但 是 展 子 还 是 不 够 稳 国 ， 因 为 top、rignht 属性 值 大 小 和 Padqing 属 
性 值 厢 合 在 了 一 起 。 实 际 上 ， 有 小 技巧 可 以 使 其 不 灯 合 ， 那 就 是 间距 不 是 使 用 padqing 撑 开 ， 
而 是 使 用 透明 的 porder 撑 开 。 例 如 : 


.list { 

















border: lrem solid transparent; 
| 
.tag { 

Position: absolute; 

topP: QF LLGNEY.,0; 
} 


top、right 属性 值 都 是 0， 被 固定 了 下 来 ， 于 是 当 间 距 发 生变 化 的 时 候 ， 只 需要 改变 
border 宽度 就 可 以 ， 示 意 如 下 : 








.list-2 { 
border: . /Drem solid transparent; 


} 


此 技巧 唯一 需要 注意 的 就 是 尽量 不 要 设置 overflow:hidden。 
6.5.2 具有 相对 特性 的 无 依赖 absolute 绝对 定位 


即使 写 了 很 多 年 CSS 代码 的 人 也 可 能 会 错误 地 回答 下 面 这 个 问题 ， 一 个 绝对 定位 元 素 ， 没 
有 任何 left/top/right/bottom 属性 设置 ， 并 且 其 祖先 元 素 全 部 都 是 非 定 位 元 素 ， 其 位 置 在 
哪里 ? 

很 多 人 都 认为 是 在 浏览 器 窗口 左上 方 。 实 际 上 ， 还 是 当前 位 置 ， 不 是 在 浏览 器 左上 方 。 

这 是 天 于 absolute 绝对 定位 最 典型 的 错误 认 知 。 正 是 这 种 错误 认 知 导致 凡是 使 用 
absolute 绝对 定位 的 地 方 ， 一 定 父 容器 position:relative， 同 时 left/top 等 属性 定 
位 ， 甚 至 必 同 时 使 用 z-index 属性 设置 层级 。 

在 我 看 来 ， 这 是 非常 严重 的 认 知 和 使 用 错误 ! 

请 牢记 下 面 这 句 话 : absolute 是 非常 独立 的 CSS 属性 值 ， 其 样式 和 行为 表现 不 依赖 其 他 
任何 CSS 属性 就 可 以 完成 。 
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言语 是 苍白 的 ， 我 们 来 看 一 个 例子 感受 一 下 。 图 6-50 左上 角 有 一 个 “TOP1” 的 图 形 标志 ， 
请 问 如 何 布局 ? Ca 

想必 很 多 人 是 这 么 实现 的 : 

.father 1{ 


Position: relative; 


} 
.Shape { 





Position: absolute; 
top: 0; left: 0O; 图 6-50 左上 角 有 “TOP1” 
| 形 目标 效果 示意 
如 有 果 你 也 是 这 么 实现 的 ， 就 要 注意 了 ， 因 为 这 说 明 你 对 absolute 认 知 还 是 太 浅 注 了 。 实 
际 上 ， 只 用 下 面 一 行 CSS 了 束 足 够 了 : 


.Shape { 





Position: absolute; 


| 

没 错 , 就 这 一 行 , 而 且 兼 容 性 好 得 出 奇 。 眼见 为 实 , 手动 输入 http://demo.cssworld.cn/6/5-4.php 
或 者 扫 右 侧 的 二 维 码 。 回 ] pe = [a] 

看 到 没 ? absolute 定位 效果 实现 完全 不 需要 父 元 聚 设置 position JE Pi 
为 relative 或 其 他 什么 属性 就 可 以 实现 ， 我 把 这 种 没有 设置 left/top/ : 
right/bottom 属性 值 的 绝对 定位 称 为 “无 依赖 绝对 定位 ”>。 很 多 场景 下 ， 
“无 依赖 绝对 定位 ”要 比 使 用 left/top 之 类 属性 定位 实用 和 强大 很 多 ， 
为 其 除了 代码 更 简洁 外 ， 还 有 一 个 很 棒 的 特性 ， 就 是 “相对 定位 特性 ”。 

明明 absolute 是 “绝对 定位 ”的 意思 ， 怎 么 又 扯 到 “相对 定位 特性 ”了 呢 ? 没 错 , “无 
依赖 绝对 定位 ”本 质 上 就 是 “相对 定位 ” 仅仅 是 不 占据 CSS 流 的 尺寸 空间 而 已 。 

“相对 性 ”和 “不 占据 空间 ”这 两 个 特性 在 实际 开发 的 时 候 非常 有 用 ， 除 了 上 面 左 上 角 加 
“TOP1” 图 形 标志 的 案例 ， 我 再 举 几 个 实用 例子 ， 展 示 一 下 “无 依赖 绝对 定位 ”的 强大 之 处 。 

1. 各 类 图 标定 位 

我 们 经 常会 在 导航 右上 方 增加 一 个 “NEW” 或 者 “HOT” 
这 样 的 小 图 标 ， 如 图 6-51 所 示 。 要 实现 在 导航 文字 右上 方 。 革 于 里 0 
的 定位 很 简单 , 直接 对 加 图 标 这 个 元 素 进行 样式 设 定 就 可 以 
了 ， 原 来 纯 文字 导航 时 的 样式 完全 不 需要 有 一 丁点 儿 的 修 
改 。 下 面 以 “HOT” 图 标 为 例 : 


.ICOn-hot { 



































图 6-51 导航 文字 右上 方 图 标示 意 





Position: absolute; 

margin: -6px 0 0 2px; 

width: 28px; height: 11lpx; 

background: url (hot .gif); 
} 
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一 个 简 简 单单 的 position:absolute， 人 然后 通过 margin 属性 进行 定位 ， 效 果 即 达成 ， 
包括 IE6 在 内 的 浏 贤 右 都 古 菩 容 民 好 的 。 

日 后 这 个 图 标 下 架 了 ， 我 们 只 需要 把 图 标 对 应 的 HTML 代码 和 CSS 删 挥 就 可 以 ， 原 来 的 
代码 完全 不 需要 改动 。 不 仪 代码 人 简洁， 日 后 的 维护 也 很 方便 ， 更 关键 的 是 ， 即 使 导航 中 的 文字 
长 度 及 生 了 变化 ， 我 们 的 图 标 依 然 定 位 良好 ， 因 为 “无 依赖 绝对 定位 ”的 图 标 是 自动 跟 在 文字 
后 面 显示 的 。 

设想 一 下 ， 如 果 给 父 元 素 设 置 Position:relative, 然后 wight/top 定位 ， 文 字 长 度 
一 且 发 生变 化 ，CSS 代码 就 要 重新 调整 ， 这 维护 成 本 显然 要 比 前 一 种 方法 高 了 很 多 。 眼 见 为 实 ， 
手动 输入 http://demo.cssworld.cn/6/5-5.php 或 者 扫 下 面 的 二 维 码 。 实 际 上 ， 即 使 是 普通 的 水 平 对 
齐 的 图 标 也 可 以 使 用 “无 依赖 绝对 定位 ”实现 ， 类 似 图 6-52 所 示 效 果 。 


nil 

















@ 邮箱 格式 不 准确 





图 6-52 图片 和 文字 水 平 对 齐 


我 们 可 以 这 么 处 理 : 


<span class="ijcon-x"> 
<i class="icon-warn"></i> 邮 箱 格式 不 准确 
</span> 
.ICOn-X { 
line-height: 20px; 
padding-left: 20px; 
} 
.lcon-warn { 
Position: absolute; 
margin-left: -20px; 
width: 20px; height: 20px; 
background: url (warn.png) no-repeat center; 


} 


同样 是 position:absolute, 然后 简单 的 margin 偏 移 实现 。 此 方法 兼容 性 很 好 ， 
与 inline-block 对 齐 相 比 的 好 处 在 于 ，inline-block 对 齐 最 终 行 框 高 度 并 不 是 
20PX， 因为 中 文 下 沉 ， 图 标 居 中 ， 要 想 视 觉 上 水 平 ， 图 标 vertLGal=aL1i0n 对 齐 要 比 实 
际 低 一 点 儿 ， 这 就 会 导致 最 终 整 个 行 框 的 局 上 度 不 是 预期 的 20px， 而 是 21px 或 者 更 大 。 
但 是 ， 如 果 使 用 “无 依赖 绝对 定位 ”实现 ， 则 完全 不 要 担心 这 一 问题 ， 因 为 绝对 定位 元 系 
不 会 改变 正 第 流 的 尺寸 空间 ， 束 算 我 们 的 图 标 有 30px 大 小 ， 行 框 高 度 依然 是 纯 文 本 所 在 
的 20px 高 度 。 

2. 超越 常规 布局 的 排版 

图 6-53 给 出 的 是 一 个 常见 的 注册 表 蛙 ,为 了 保证 视觉 舒适 , 我 们 往往 会 让 表 蛙 水 平 大 中 对 
齐 。 例 如 ， 这 里 宽度 300 多 像素 ， 于 是 有 : 
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.box { 
width: 356px; 
Mtolns ants +* 邮箱 


} 

通过 设置 marglin:auto 实现 水 平 居 中 效果 , 乍 一 Pe 
看 效果 达成 ， 但 是 实际 开发 的 时 候 还 有 提示 或 报错 等 交 
互 效果 。 有 一 种 做 法 是 提示 信息 放 在 输入 框 的 下 面 ， 但 
这 样 做 会 带 来 一 种 不 好 的 体验 ， 那 束 是 提示 信息 出 现 和 
隐藏 的 时 候 ， 整 个 容器 的 高 度 会 突然 变化 ; 还 有 一 种 做 
法 就 是 在 输入 框 的 后 面 显示 ， 但 是 为 了 让 默认 状态 下 表 。。 图 56-53 水平 居 中 对 齐 的 注册 表单 
单 水 平 居 中 ， 外 面容 器 的 宽度 不 是 很 大 ， 因 此 如 果 在 后 面 显 示 ， 束 会 有 宽度 不 够 的 问题 。 如 果 
我 们 使 用 “无 依赖 绝对 定位 ” 那 这 个 问题 就 不 再 是 问题 了 。 假 设 提示 文字 内 容 元 素 的 类 名 
是 .remark， 则 有 CSS 代码 如 下 : 











立即 注册 


remark 1 
Position: absolute; 
margin-left: 10px; 
} 
就 这 么 简 简单 单 的 CSS 代码 , 效果 即 达 成 ， 既 在 输入 框 的 后 面 显 示 , 又 跳出 了 容器 宫 度 的 限制 ， 
同时 显 隐 不 会 影响 原先 的 布局 。 
眼见 为 实 , 输入 后 面 的 演示 页 面 地 址 体验 : http:/demo.cssworld.cn/6/$-6.php。 效果 如 图 6-54 
所 示 。 





6-54 “无 依赖 绝对 定位 ”提示 信息 布局 示意 


更 为 关键 的 是 ， 捉 示 信 息 的 位 置 智能 跟随 输入 框 。 例 如 ， 我 们 这 里 把 输入 框 的 宽度 改 小 ， 





会 看 到 提示 信息 会 目 动 跟着 往 前 走 ， 如 图 6-55 所 示 。 与 容器 设置 position:relative 再 通 
过 Left 属性 实现 的 定位 相 比 ， 其 代码 更 简洁 ， 容 错 性 更 强 ， 维 护 成 本 更 低 。 

此 外 ， 页 面 中 的 星 号 也 是 典型 的 “无 依赖 绝对 定位 ”， 目 喘 绝 对 定位 ， 然 后 通过 margin- 
left 人 负 值 偏 移 实现 ， 从 而 保证 所 有 输入 信息 尖 左 对 齐 ， 同 时 叉 不 会 影响 原先 的 布局 ， 也 就 是 
星 写 有 没有 对 布局 没有 任何 影响 。 
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3. 下 拉 列 表 的 定位 

在 实现 静态 下 拉 效 果 的 时 候 ， 也 是 可 以 使 用 “无 依赖 绝对 定位 ”的 。 演 示 页 面 地 址 
http://demo.cssworld.cn/6/5-7.php 给 出 了 一 个 例子 。 当 我 们 focus 输入 框 的 时 候 , 下 拉 列 表 会 呈 
现 ， 如 图 6-56 所 示 。 











* 邮箱 
搜索 结果 1 
密码 请 输入 6-16 位 密码 ， 不 能 使 用 空格 近 索 结果 2 
搜索 结果 3 
手机 号 码 
搜索 结果 4 


6-55 “无 依赖 绝对 定位 ”智能 跟随 示意 6-56 “无 依赖 绝对 定位 ”下 拉 列 表 效 果 
这 里 ， 这 个 下 拉 列 表 的 定位 采用 的 束 是 “无 依赖 绝对 定位 ”相关 HTML 和 CSS 代码 如 下 : 











<input> 
<div class="result"> 
<div class="datalist"> 
<a href> 搜 索 结 果 1</a> 


</div> 


</div> 
/* 下 拉 列 表 的 无 依赖 绝对 定位 */ 
.datalist { 


Position: absolute; 
} 
/* 列表 的 显 隐 控制 */ 


.Search-result 1{ 





display: none; 
AR ~ .search-result 1{ 
display: block; 
} 
就 一 个 position:absolute 碘 实 现 了 我 们 想 要 的 效果 , 没有 left、top 定位 ， 父 元 素 
也 没有 position:relative 设 定 ， 效 果 束 达成 了 ， 而 且 莱 容 性 好 到 IE6 都 完美 定位 。 
除了 代码 少 这 个 好 处 外 ， 维 护 成 本 也 在 一 定 程度 上 降低 了 ， 比 方 说 ， 输 入 框 的 高 度 发 生 了 
变化 ， 我 们 不 需要 修改 任何 CSS 代码 ， 列 表 依 然 在 输入 框 的 底部 完美 对 齐 显示 。 不 仅 如 此 ， 没 
有 了 父 元 素 position:relative 限定 , 我 们 的 z-index 层级 管理 规则 更 简单 了 ， 并 且 也 无 
须 担 心 父 元 素 设 置 oveflow:hidden 会 裁 甬 下拉 列表 。 
不 过 这 里 我 有 必要 补充 一 点 ， 虽 然 “ 无 依赖 绝对 定位 ”好 处 多 多 ， 但 建议 只 用 在 静态 交互 
效果 上 , 比方 说 , 导航 二 级 菜单 的 显示 与 定位 。 如 果 是 动态 呈现 的 列表 , 建议 还 是 使 用 JavaScript 
来 计算 和 定位 。 
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4. 占 位 符 效 果 模 拟 

IE9 及 其 以 下 浏览 占 不 文 持 placeholder 占 位 符 效 末 ， 实 际 开发 的 时 候 ， 和 针对 这 些 浏览 
器 ， 需 要 进行 模拟 。 比 较 好 的 做 法 是 使 用 <labe1l> 标 签 和 输入 框 关 联 并 覆盖 在 输入 框 上 面 ， 好 
处 是 点 击 占 位 文字 输入 框 天 然 focus， 并 且 不 会 污染 输入 框 的 value。 

这 里 的 禾 兰 效 末 也 可 以 使 用 “无 依赖 绝对 定位 ”实现 ， 好 处 是 组 件 化 的 时 候 适 用 性 更 三， 
为 不 会 对 父 级 元 系 进 行 定位 属性 限制 。 用 下 面 的 代码 简单 演示 一 下 实现 原理 : 

<label class="placeholder" for="text"> 占 位 从 </label> 

<input id="test"> 


/* 和 输入 框 一 样 的 样式 */ 
.Placeholder, input 1{ 

















l 

/* 占 位 符 元 素 特有 样式 */ 

.Placeholder { 
Position: absolute; 


} 

由 于 “无 依赖 绝对 定位 ”本 质 上 就 是 一 个 不 占据 任何 空间 的 相对 定位 元 系 ， 因 此 这 里 我 们 
让 上 丘 位 符 元 素 和 输入 框 的 布局 样式 一 模 一 样 ， 再 设置 绝对 定位 ， 就 可 以 和 输入 完美 重 登 定位 。 
当然 有 一 些 样 式 是 需要 重 置 的， 比方 次 ， 输 入 框 经 名 会 设置 border 边框 样式 ， 那 么 我 们 的 占 
位 符 元 素 就 需要 把 边框 凑 色 设置 成 透明 的 ， 例 如 : 


.Placeholder { 











border-color: transparent; 


} 

随 着 时 代 的 进步 和 浏览 器 的 发 展 ， 这 种 占 位 符 效果 模拟 的 场景 会 越 来 越 少 ， 因 此 这 里 束 不 专 
门 做 演示 页 面 详细 展开 讲解 了 。 但 是 ,“ 无 依赖 绝对 定位 ”的 人 简约 便捷 以 及 健壮 性 是 显而易见 的 。 

5. 进一步 深入 “无 依赖 绝对 定位 ” 

虽然 说 元 系 BOSLLLION:absoLUute 后 的 display 计算 值 都 是 块 状 的 ， 但 是 其 定位 的 位 置 
和 没有 设置 position:absolute 时 候 的 位 置 相 关 。 举 个 简单 的 例子 , 有 下 面 两 段 HTML 代码 : 


<h3> 标 题 <span class="follow">span</span></h3> 
<hi33 杯 司 <div elass=s"folLl1ow"S>div</div></h3> 


其 差别 束 在 于 “标题 ”文字 后 面 跟随 的 标签 ， 一 个 是 内 联 的 <span>， 还 有 一 个 是 块 状 的 
<dqiv>， 此 时 ， 显 然 span 字符 是 跟 在 “标题 ”后 面 显 示 ，qiv 字符 则 换行 在 “标题 ”下 面 显 
示 ， 这 个 想必 大 家 都 知道 。 好 ， 现 在 有 如 下 CSS 代码 : 

.follow { 


Position: absolute; 


} 
虽然 此 时 无 论 是 内 联 的 <span> 还 是 块 状 的 <div>， 计 算 值 都 是 block， 但 是 它们 的 位 置 
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还 和 没有 应 用 position:absolute 的 时 候 一 样 , 一 个 在 后 面 , 一 个 在 下 面 ， 如 图 6-57 所 示 。 





假如 HTML 是 下 面 这 样 的 : 标题 span 
<h35 标 懒 </hi3><apan clase="foOllOw"Sepan</Soan> 标题 
xh3> 标 题 </h3S<div class="follow">div</div> div 
那么 由 于 非 绝 对 定位 状态 下 span 和 div 都 在 “标题 ”的 下 面 ， 因 此 ， 图 6-57 “无 依赖 绝对 
二 可 0 定位 ”表现 规则 示意 
这 里 最 后 的 效果 也 同样 是 都 在 “标题 ”的 下 面 。 定位 ”表现 规则 不 


看 上 去 ,“ 无 依赖 绝对 定位 ”的 定位 原理 还 是 挺 简单 的 ， 但 是 在 实际 开发 的 时 候 ， 有 时 候 
会 遇 到 一 点 问题 。 

首先 ， 了 下 7 浏览 占 下 ， 块 状 的 <aiv>“ 无 依赖 绝对 定位 ”的 定位 表现 如 同 内 联 的 <span>， 
也 束 是 无 论 是 块 级 元 系 还 是 内 联 元 系 ,“ 无 依赖 绝对 定位 ”后 都 和 内 联 元 系 一 行 显示 。 右 要 你 证 
兼容 ， 可 以 在 外 部 套 一 层 空 的 <div> 标 签 来 维持 原始 的 块 状 特性 。 不 过 ， 因 为 现在 很 少 需要 兼 
容 IE7 浏览 右 ， 所 以 这 不 算 事 儿 。 

其 次 ， 前 文 提 到 序 动 和 绝对 定位 是 死对头 ， 当 “浮动 ”和 “无 依赖 绝对 定位 ”相遇 的 时 候 ， 
就 会 友 生 一 些 不 愉快 的 事情 。HTML 代码 如 下 : 

<div class="nav"> 导 航 1</div> 


<img src="new.png" class="follow"> 
divy Glage="nay"> /Nl 2</diyv> 


这 里 .nav 是 一 个 浮动 色 块 ， 相 关 CSS 如 下 : 


.follow { 
Position: absolute; 
} 
.na { 
width: 100px; 
line-height: 40px; 











background-color: #333; 
Color: #f£fff; 
text-align: center; 
float: left; 

} 


结果 在 正和 Chrome 浏览 费 下 ,来 在 中 间 的 <img> 在 中 则 显示 ( 见 图 6-58 上 ), 但 是 Firefox 
浏览 器 却 是 在 最 后 显示 《〈 见 图 6-58 下 )。 

此 处 的 浏览 絮 不 一 致 的 行为 表现 应 该 属于 “未 定义 行为 ”， 
没有 谁 对 谁 错 , 只 是 各 目 按 照 目 己 的 泻 染 规则 表现 而 已 。Firefox 
浏览 左下 的 定位 位 置 或 许 比 较 好 理解 ， 因 为 和 没有 设置 position: 
absolute 表现 一 致 ， 符 合 我 们 对 上 面 规则 的 理解 。 那 为 何 下 和 
Chrome 浏览 郝 却 在 中 间 显 示 呢 ? 我 认为 是 这 样 的 : 浏览 右 对 于 
DOM 元 素 的 样式 洽 染 是 从 前 往 后 、 由 外 及 内 的 ， 因 此 演 染 顺序 是 
和 匈 “导航 1” 册 “图 片 ” 最 后 是 “导航 2”。 当 演 染 到 “图 乒 ” 的 时 候 ， 由 于 “导航 1” 左 浮动 ， 























6-58 “浮动 ”和 “无 依赖 
绝对 定位 ”不 一 致 的 表现 
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因此 内 联 的 图 片 跟 在 后 面 显示 ， 此 时 由 于 设置 了 position:absolute， 因 此 当前 位 置 定 位 并 不 
占据 任何 空间 ， 再 泻 染 “导航 2” 的 时 候 ， 中 间 的 “图 片 ” 基 本 上 跟 不 存在 没什么 区 别 ， 因 此 也 束 
和 “导航 1” 紧 密 相 连 了 ， 最 终 形 成 了 “图 片 ” 在 中 间 显 示 的 样式 表现 。 

对 于 上 述 场景 ， 如 宋 硕 望 各 个 浏览 右 的 表现 都 是 一 样 的 ，<img> 外 层 仍 和 父 一 层 标 俭 并 浮动 即 
可 ， 注 意 ， 和 是 外 层 标 俭 译 动 。 由 于 浮动 和 绝对 定位 水 火 不 容 ， 本 刁 设 置 译 动 是 没有 任何 效 末 的 。 
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按 道 理 讲 ，absolute 和 float 一 样 ， 都 可 以 让 元 素 块 状 化 ， 应 该 不 会 受 控制 内 联 元 素 
对 齐 的 text-align 属性 影响 ， 但 是 最 后 的 结果 却 出 人 意料 ，text-align 居然 可 以 改变 
absolute 元 聚 的 位 置 。 

如 下 简单 的 HTML 和 CSS 代码 : 





<p><img src="1 .jpg"></p> 
p { 
text-align: center; 
} 
img { 
Position: absolute; 


} 
在 Chrome 和 Firefox 浏览 嚣 下， 图 厂 在 中 则 位 置 显 示 了 ， 但 是 仪 仅 古 在 中 间 区 域 显示 ， 并 不 是 
水 平 夺 中 ， 如 末 我 们 给 <p> 设 定 尺 寸 并 添加 背景 色 ， 束 会 看 到 如 图 6-59 所 示 的 效果 。 

眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/6/5-8.php 或 者 扫 下 面 的 二 维 码 。 

















6-59 图片 在 中 间 位 置 开始 显示 


虽然 本 示例 中 图 片 位 置 确实 受 text-align 属性 影响 ， 但 是 并 不 是 text-align 和 
absolute 元 素 直 接 发 生 关 系 ，absolute 元 素 的 display 计算 值 是 块 状 的 ，text-align 
是 不 会 有 作用 的 。 这 里 之 所 以 产生 了 位 置 变 化 ， 本 质 上 是 “幽灵 至 白 贡 点 ”和 “无 依赖 绝对 定 
位 ”共同 作用 的 结果 。 

具体 的 演 染 原理 如 下 。 

(1) 由 于 <img> 是 内 联 水 平 ，<p> 标 签 中 存在 一 个 宽度 为 0、 看 不 见 摸 不 着 的 “幽灵 空 
节点 ”， 也 是 内 联 水 平 ， 于 是 受 text-align:center 影响 而 水 平 居 中 显示 。 

(2) <img> 设 置 了 position:absolute， 表 现 为 “无 依赖 绝对 定位 ”因此 在 “幽灵 空 
日 市 点 ”后 面 定 位 显示 ; 同时 由 于 图 三 不 占据 空间 ， 这 里 的 “ 幽 姑 空 日 节操 ”当仁不让 ， 正 好 
在 <P> 元 系 水 平 中 心 位 置 旺 示 ， 于 是 我 们 惑 看 到 了 图 片 从 <P> 元 系 水 平 中 间 位 置 旺 示 的 效 末 。 
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这 是 非常 简约 的 定位 表现 。 此 时 ， 我 们 只 要 margin-left 一 半 图 片 宽度 负 值 大 小 ， 就 可 以 
实现 图 片 的 水 平 居 中 效果 了 ， 与 父 元 素 BOoS1ition relative 然后 定位 元 素 设 置 left:50% 的 方 
法 相 比 ， 其 优势 在 于 不 需要 改变 父 元 素 的 定位 属性 ， 避 免 可 能 不 希望 出 现 的 层级 问题 等 。 

然而 ， 正 浏览 器 的 文 持 不 一 样 导 致 此 方法 的 场景 实用 性 打 了 折扣 。 当 然 ， 有 小 技巧 可 以 使 
所 有 浏览 器 都 完美 支持 ， 如 果 只 需要 兼容 IE Edge 移动 端 开发 时 候 )， 额 外 加 下 面 这 一 段 CSS 
语句 束 可 以 了 : 


p:before { 











content: 7 1， 


} 
如 果 硕 望 兼容 IE8 浏览 器 ， 则 CSS 代码 还 要 再 多 一 点 儿 : 


p { 

text-align: center; 

font-size: .1px; 

font-size: ~webkit-calc(lpx - lpx); 
} 
p:before { 


content: '\2002'， 
} 
img { 
position: absolute; 


} 


其 中 ,，\2002 表示 某 一 种 空格 。 通 过 插入 显 式 的 内 联 字 符 ， 而 非 借 助 顽 
渺 的 “幽灵 空白 节点 ”实现 所 有 浏览 右 下 的 一 臻 表现。 

眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/6/5-9.php 或 者 扫 右 侧 的 二 
维 码 。 

需要 注意 的 是 ， 只 有 原本 是 内 联 水 平 的 元 素 绝 对 定位 后 可 以 有 党 text- 
align 属性 影响 ， 这 不 难 理解 ， 因 为 块 级 元 北 的 “无 依赖 绝对 定位 ”是 折 在 下 面 显示 的 ， 水 平 
方 回 上 并 无 可 “依赖 ”的 内 联 元 素 ，text-align 属性 自然 著 长 英 及 。 














按照 我 的 经 验 ， 利 用 text-align 控制 abpsolute 和 
元 素 的 定位 最 适合 的 使 用 场景 就 是 主 窗 体 右 侧 的 “返回 
顶部 ”以 及 “反馈 ”等 小 布局 的 实现 。 例如 , http://demo. SS 


cssworld.cn/6/5-10.php 对 应 的 实例 页 面 效 果 ， 核 心 区 域 
如 图 6-60 所 示 。 图 6-60 所 示 的 效果 的 核心 HTML 和 图 6-60 主 结构 石 外 侧 回 定 定 位 布局 示意 
CSS 代码 如 下 : 


<div class="alignright"> 








<span class="follow"></span> 
</diyv> 
.alignright { 

height: 0; 
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text-align: right; 
overflow: hidden; 
} 
.alignright:before { 
content: "\2002",; 
’ 
.follow { 
Position: fixed; 
bottom: 100px; 
z-index: 1，; 


} 


使 用 :before 伪 元 素 在 前 面 插入 一 个 空格 ， 此 时 .alignright 设置 text-align:right， 
则 此 空格 对 齐 主 结构 的 右边 绿 显 示 ， 后 面 的 固定 定位 元 素 〈 同 绝对 定位 元 了 系 ) 由 于 “无 依赖 定 
位 ”特性 ， 左 边缘 正好 就 是 主 结构 的 右边 缘 ， 天 然 跑 到 主 结构 的 外 面 显示 了 ， 而 这 个 效果 正 是 
固定 在 右 下 角 的 “返回 项 部 ”以 及 “反馈 ”小 按钮 布局 需要 的 效果 。 

此 方法 兼容 性 很 好 ， 层 级 单纯 ， 唯 一 的 问题 就 是 插入 了 一 个 空格 ， 会 占据 一 定 的 高 度 ， 这 
是 不 推荐 的 ， 最 好 就 是 有 没有 “返回 顶部 ”等 元 系 痢 不 影 啊 主 结构 的 布局 。 所 以 ， 我 们 要 把 占 
据 的 高 度 抹 掉 ， 方 法 很 简单 ， 设 置 neight: 0 同时 overflow:hidden 即 可 。 

此 时 ， 有 人 可 能 会 惊 呼 : 什么 ? 设置 neight:0 同时 overflow:hidden? 那 忆 不 是 里 
面 押 有 元 系 都 被 筋 裁 看 不 见 啦 ? 

如 果 是 普通 元 素 确 实 会 如 此 ， 但 是 对 于 absolute 绝对 定位 以 及 fixed 固定 定位 元 素 ， 
规则 要 更 复杂 ! 
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overflow 对 absolute 元 系 的 剪裁 规则 用 一 句 话 表述 束 是 : 绝对 定位 元 素 不 总 是 被 父 级 
overflow 届 性 剪裁 ， 尤 其 当 overflow 在 绝对 定位 元 素 及 其 包含 块 之 间 的 时 候 。 

上 和 面 这 人 句 话 是 官方 文档 的 直译 ， 似 乎 还 是 有 些 擂 口 ， 我 们 再 换 一 种 方法 表述 就 是 : 如 果 
ovVerflow 不 是 定位 元 素 ， 同 时 绝对 定位 元 素 和 overflow 容器 之 间 也 没有 定位 元 素 ， 则 
overflow 无 法 对 absolute 元 素 进 行 剪裁 。 

因此 下 面 HTML 中 的 图 片 不 会 被 筋 裁 : 


<div style="overflow: hidden;"> 








<img src="1 .jpg" style="position: absolute;"> 
</div> 


overflow 元 素 父 级 是 定位 元 素 也 不 会 剪裁 ， 例 如 : 


<div style="position: relative;"> 





<div style="overflow: hidden;"> 
<img src="1 .Jpg" style="position: absolute;"> 
</div> 
</div> 
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但 是 ， 如 果 overflow 属性 所 在 的 元 妹 同 时 也 是 定位 元 素 ， 里 面 的 绝对 定位 元 系 会 被 筋 裁 : 


<div style="overflow: hidden; position: relative;"> 
<img src="1.jpg" style="position: absolute;"> <!-- 剪裁 --> 
< LY 


如 果 overflow 元 素 和 绝对 定位 元 素 之 间 有 定位 元 素 ， 也 会 被 六 裁 : 


<div style="overflow: hidden;"> 
<div style="position: relative;"> 


<img Src="1,.1pg" Style="™osition: absolute:"™> <!l== 一 裁 ==》 
</div> 
< Ul 





如 果 overflow 的 属性 值 不 是 hidden 而 是 auto 或 者 scrol1l1， 即使 绝对 定位 元 取 高 宽 
比 overflow 元 素 高 宽 还 要 大 ， 也 都 不 会 出 现 深 动 条 。 例 如 ， 下 面 的 HTML 和 CSS 代码 : 





<div class="box"> 
<img src="1 .jpg"> 

</div> 

.box { 
width: 300px; height: 100px; 
background-color: #f0f3f9; 
Overflow: auto; 

} 

.box > img { 
width: 256PX height: 192px; 
Position: absolute; 


} 

图 片 高 度 256px 比 容器 .box 高 度 100px 明显 高 出 了 一 截 ， 但 是 ， 没 有 滚动 条 出 现 。 

实际 开发 的 时 候 ， 绝 对 定位 元 素 和 非 绝 对 定位 元 素 往 往 可 能 混杂 在 一 起 ， 虽 然 绝 对 定位 元 
素 不 能 让 深 动 条 出 现 , 但 是 非 绝 对 定位 元 素 可 以 ， 于是， 就 可 能 出 现 男 外 一 种 很 有 特色 的 现象 ， 
即 当 容 器 滚动 的 时 候 ， 绝 对 定位 元 系 微 丝 不 动 ， 不 跟 痢 滚动， 表现 类 似 fixed 固定 定位 ， 如 图 
6-61 所 示 ， 滚 动 到 头 和 滚动 到 尾 ， 网 片上 的 位 置 都 是 一 样 的 。 眼 见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/6/5-11.php 或 者 扫 下 面 的 二 维 码 。 














图 6-61 绝对 定位 元 素 不 跟随 深 动 示意 
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最 后 ， 非 常 有 必要 补充 一 点 ， 那 就 是 由 于 position:fixed 国定 定位 元 系 的 包含 块 是 根 
因此 , 除非 是 窗 体 深 动 , 否则 上 面 讨论 的 所 有 overflow 可 裁 规则 对 固定 定位 都 不 适用 。 

一 点 后 面 还 会 提 及 。 

了 解 这 些 特性 有 什么 用 呢 ? 

作用 一 是 解雇 实际 问题 。 例 如 上 一 节 最 后 “返回 顶部 ”的 案例 ， 保 证 高 度 为 0， 同 时 里 面 
的 定位 内 容 不 会 被 剪裁 ， 或 者 在 局 部 滚动 的 容器 中 模拟 近似 position :fixed 的 效果 。 作 用 
二 是 在 过 到 类 似 现象 的 时 候 知 道 问 题 所 在 ， 可 以 “对 症 下 药 ” 快速 解决 问题 

然而 ， 虽 然 实 际 开发 的 时 候 ， 对 于 局 部 深 动 ， 我 们 经 常会 有 元 素 不 跟随 深 动 的 需求 ， 如 表 
头 固 定 ， 但 是 从 可 维护 性 的 角度 讲 ， 建 议 还 是 将 这 个 表 头 元 素 移 动 到 深 动 容器 外 进行 模拟 ， 
为 我 们 总 会 不 小 心 在 某 一 层 标 签 添加 个 类 似 的 声明 ， 此 时 ， 原 本 的 不 
跟随 滚动 的 表 头 会 因为 包含 块 的 变化 变 得 可 以 滚动 了 ， 这 显然 是 我 们 不 愿意 看 到 的 。 当 然 ， 如 
果 HTML 结构 被 限制 无 法 修改 ， 则 利用 overflow 滚动 absolute 元 素 不 滚动 的 特性 来 实现 
表 头 固定 的 效果 则 是 上 上 之 选 ， 会 让 人 眼前 一 亮 ! 

在 CSS 世界 中 ， 上 面 说 的 这 些 几 乎 都 是 完美 无 瑕 的 ， 但 是 ， 随 着 CSS3 新 世界 到 来 的 冲击 ， 规 
则 在 不 经 意 间 发 生 了 一 些 变化 ， 其 中 最 明显 的 就 是 上 transform 属性 对 overflow 藤 裁 规则 的 影响 ， 
CSS3 新 世界 中 transform 属性 似乎 扮演 了 原本 “定位 元 素 ” 的 角色 ,但 是 这 种 角色 扮演 并 不 完全 。 
什么 意思 呢 ? 我 们 先 看 下 面 我 统计 的 出 现 transform 属性 时 overflow 可 裁 绝对 定位 元 聂 的 数据 。 
0verfL6W 元 宁 目 时 transtorin: 

IE9 及 以 上 版 本 浏览 器 、Firefox 和 Safari (OS X、iOS) 前 裁 ; 
。 Chrome 和 Opera 不 剪裁 。 
Yertlowy 7S CiaNSeoris 

。 IE9 及 以 上 版 本 浏览 器 、Firefox 和 Safari (OS X、iOS) 剪裁 ; 

。 Chrome 和 Opera 剪裁。 

可 以 看 到 overflow 元 素 上 自身 transform 的 时 候 ，Chrome 和 Opera 济 贤 器 下 的 
overflow 甬 裁 是 无 效 的 ， 这 是 唯一 和 有 定位 属性 时 的 overflow 筋 裁 不 一 样 的 地 方 ， 因 此 才 
有 “角色 扮演 并 不 完全 ”的 说 法 。 

transform 除了 改变 overflow 属性 原 有 规划， 对 层 车 上 下 文 以 及 position:fixed 的 
染 都 有 影响 。 因 此 ， 当 大 家 过 到 absolute 元 素 锐 及 祖 或 者 fixed 固定 定位 失效 时 ， 可 以 
2 transform 属性 在 作 尝 。 



































@ 
局 


Did 














6.7 absolute 5 clip 


CSS 世界 中 有 些 属性 或 者 特性 必须 和 其 他 属性 一 起 使 用 才 有 效 ， 比 方 说 前 裁 属性 clip。 
1 证 属性 要 想起 作用 ， 元 素 必 须 是 绝对 定位 或 者 固定 定位 ， 也 束 是 BOSILtLON 属性 值 必须 是 
absolute 或 者 fixed。 

clip 属性 语法 如 下 : 
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clip: rect (top right bottom left) 
实际 上 ， 标 准 语法 应 该 是 : 
clip: rect (top, right, bottom, left) 


但 是 我 个 人 还 是 习惯 使 用 没有 如 号 的 语法 ， 因 为 其 羔 容 性 更 好 ，IE6 和 IE7 也 文 持 ， 而 且 
字符 更 少 。 

怠 顺 序 而 言 ，top->right-bottom left 在 CSS 世界 中 是 一 脉 相 承 的 ， 和 margin/ 
border-width 等 属性 的 4 个 值 的 顺序 一 样 ， 都 是 从 top 开始 ， 顺 时 针 旋 转 。 不 过 这 里 的 4 
个 值 有 一 个 明显 不 一 样 的 地 方 ， 就 是 不 能 缩写 ， 且 和 porder-widtn 类 似 ， 是 不 文 持 百 分 比 
值 的 。 

那 具体 是 如 何况 裁 的 呢 ? 我们 看 一 个 例子 ，CSS 如 下 : 


clip: rect (30px 200px 200px 20px) 


可 以 想象 ， 我 们 手中 有 一 把 剪刀 ， 面 前 有 一 块 画 布 ， 
rect (30px 200px 200px 20px) 表示 的 含义 就 是 : 距离 画布 
上 边缘 30px 的 地 方 交 一刀, 距离 画布 右边 缘 200px 的 地 方 剪 一 
思 ,; 距离 画 布下 边缘 200px 的 地 方 前 一刀 ,距离 画布 左边 缘 20px 


的 地 方 剪 一 刀 。 最 终 我 们 束 得 到 一 个 新 的 剪裁 好 的 窍 形 画布 ， 如 
图 6-62 所 示 。 6-62 ”画布 剪裁 示意 


6.7.1 重新 认识 的 clip 属性 


非常 多 的 人 都 不 知道 CSS 中 还 有 抱 大 腿 的 clip 剪裁 属性 ， 束 算 见 到 ， 也 认为 它 是 一 个 非 
党 冷门 、 生 个 的 CSS 属性 ， 作 用 和 价值 不 大 。 实 际 上 ，clip 筋 裁 非常 有 用 ， 在 以 下 两 种 场景 
下 具有 不 可 符 代 的 地 位 。 

1. fixed 固定 定位 的 剪裁 

对 于 普通 元 素 或 者 绝对 定位 元 素 ， 想 要 对 其 进行 筋 裁 ， 我 们 可 以 利用 语义 更 明显 的 
overflow 属性 ， 但 是 对 于 position:fixed 元 素 ，overflow 属性 往往 就 力 不 能 及 了 ， 因 
为 fixed 固定 定位 元 又 的 包含 块 是 根 元 素 ， 除 非 是 根 元 又 六 动 条 ， 普 通 元 素 的 overflow 是 
根本 无 法 对 其 进行 剪裁 的 。 怎 么 办 呢 ? 

此 时 残 要 用 到 名 不 经 传 的 clip 属性 了 。 再 器 张 的 固定 定位 ，clip 属性 也 能 立马 将 它 筋 
裁 得 服 服 帖 帖 的 。 例 如 : 


.fixed-clip { 



































Position: fixed; 
Clip: rect (30px 200px 200px 20px); 
} 


2. 最 佳 可 访问 性 隐藏 
所 谓 “ 可 访问 性 隐藏 ”， 指 的 是 虽然 内 容 肉 眼看 不 见 ， 但 是 其 他 辅助 设备 却 能 够 进行 识别 
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和 访问 的 隐藏 。 
举 个 例子 ， 很 多 网 站 左上 角 都 有 包含 自己 网 站 名 称 的 标识 〈logo)， 而 这 些 标识 一 般 都 是 图 
厂 ， 为 了 更 好 地 SEO 以 及 无 障碍 识别 ， 我 们 一 般 会 使 用 <h1> 标 签 写 上 网 站 的 名 称 ， 代 但 如 下 : 
<a href="/" class="]0ogo"> 


有 全] ESS | 办 之 /1 
</a> 


如 何 隐 藏 <h1> 标 签 中 的 “css 氨 界 ”这 几 个 文字 ， 通 常 有 以 下 一 些 技 术 选 型 。 
。 下 策 是 display:none 或 者 visipbility:higdden 隐 蕊 ,因为 屏 欠 阅读 设备 会 忽略 























这 里 的 文字 。 
。 text-indent 缩 进 是 中 策 ， 但 文字 如 采 缩 进 过 大 ， 大 到 屏幕 之 外 ， 屏 用 阅读 设备 也 
征 不 会 读 取 的 。 


e。 color:transparent 是 移动 端 上 策 ， 但 却 是 果 面 哨 中 策 ， 因 为 原生 IE8 浏览 右 并 不 
文 持 它 。color:transparent 声明 ， 很 难 用 简单 的 方式 阻止 文本 被 框 选 。 
。 clip 筋 裁 隐 茂 是 上 胰 ， 既 满足 视觉 上 的 隐 医 ， 屏 医 疯 读 设 备 等 辅助 设备 也 文 持 得 很 好 。 
.logo hl 1 
position: absolute; 


clip: rect(0 0 0 0) 7; 
} 


clip 勇 裁 被 我 称 为 “最 佳 可 访问 性 隐藏 ”的 另外 一 个 原因 就 是 ， 它 具有 更 强 的 普通 适应 
性 ， 任 何 元 素 、 任 何 场景 都 可 以 无 障 但 使 用 。 例 如 ， 我 定义 一 个 如 下 的 CSS 语句 块 : 


.Clip { 














Position: absolute; 
clip: rect(0 0 0 0) 7; 
. 


就 可 以 整 站 使 用 ， 哪 里 需要 “可 访问 性 隐藏 ”就 加 一 个 类 名 .clip 即 可 ， 无 论 是 图 片 、 文 字 还 
是 块 级 元 素 ， 都 可 以 满足 隐藏 需求 〈 与 文字 透明 、 缩 进 等 方法 相 比 )。 同 时 ，c1lip 语法 简单 ， 
功能 单一 ， 与 其 他 CSS 属性 相 比 ， 和 元 素 原 本 CSS 样式 冲突 的 概率 更 低 。 

不 仅 如 此 ， 元 素 原 本 的 行为 特性 也 很 好 用 。 例 如 ， 依 然 可 以 被 focus， 而 且 非 常 难 得 的 是 
就 地 剪裁 ， 因 为 属于 “无 依赖 的 绝对 定位 ?。 这 一 点 很 重要 ， 我 们 来 看 下 面 这 个 实用 案例 。 

众所周知 ， 如 果 <form> 表 单元 素 里 面 有 一 个 type 为 submit 或 者 image 类 型 的 按钮 ， 那 么 
表单 自动 有 回 车 提交 行为 ， 可 以 节约 大 量 嗓 嗪 的 键盘 相关 的 事件 的 代码 。 但 是 ，submit 类 型 按钮 在 
IE7 下 有 黑 框 ， 很 难 所 有 浏览 器 (包括 Firefox 在 内 的 浏览 器 ) UI 完全 一 致 ， 对 视觉 呈现 是 个 一 挑战 。 
于 是 就 有 了 下 面 这 个 使 用 <1abe1> 元 素 李 代 桃 伪 的 经 典 策略 ; 

<form> 

<input type="submit" id-"someID" class="clip"> 


<label for="someID"> 提 区 </1label> 
</form> 
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原本 的 submit 按钮 隐藏 , 肉眼 所 见 的 按钮 UI 实际 上 是 <l1abe1l> 标 签 泻 染 。 由 于 <labe1l> 
是 非 殖 换 元 素 ， 没 有 内 置 的 UI， 因 此 兼容 性 非常 好 。 
这 里 使 用 的 clip 筋 裁 隐藏 是 我 工作 这 么 多 年 大 当 淘 沙盘 选 后 的 最 佳 实 践 ， 有 对 比 才能 显 
出 好 在 何 处 。 
。 display:none 或 者 visibility:hidden 隐藏 有 两 个 问题 ， 一 个 是 按钮 无 法 被 
focus 了 ， 另 外 一 个 是 IE8 浏览 器 下 提交 行为 于 失 ， 原 因应 该 与 按钮 focus 特性 于 
J 
。 透明度 0 履 盖 也 是 一 个 不 错 的 实践 。 如 果 是 移动 端 项 目 ， 建 议 这 么 做 ; 但 如 果 是 加 面 
谓 项 目 ， 则 完全 没有 必要 。 使 用 透明 度 0 履 兰 的 问题 是 每 一 个 场景 都 需要 根据 环境 的 
不 同 重 新 定位 ， 以 保证 点 击 区 域 的 准确 性 ， 成 本 较 高 ， 但 clip 隐藏 直接 用 一 个 类 名 
加 二 下 网 好 5 
。 还 有 一 种 比较 具有 运 用 性 的 “可 访问 隐藏” 是 下 面 这 种 屏幕 外 隐 茂 : 




















.abs-out { 

Position: absolute; 

left: -999px; top: -999px; 
} 


然而 , 在 本 例 中 , 会 出 现 一 个 比较 麻烦 的 问题 。 在 6.4 节 讲 过 , 当 一 个 控件 元 又 被 focus 
的 时 候 ， 浏 览 器 会 自动 改变 滚动 高 度 ， 让 这 个 控件 元 素 在 屏幕 内 显示 。 假 如 说 我 们 的 
<1abel>“ 提 交 ” 投 钮 在 第 二 屏 ， 则 点 击 按钮 的 时 候 浏 览 右 会 自动 跳 到 第 一 屏 置顶 ， 因 为 
按钮 隐藏 在 了 屏幕 外 , 于 是 及 生 了 非 贡 精 糕 的 体验 问题 。 而 clip 束 地 可 裁 , 束 不 会 有 “页 
面 跳动 ”的 体验 问题 。 于 是 ， 权 衡 成 本 和 效 末 ，clip 隐 减 成 为 了 最 佳 选择 ， 特 别 是 对 于 
困 面 问 项 目 。 
6.7.2 深 入 了 解 clip 的 泻 染 

上 面 天 于 clip 的 知识 多 译 于 表层 ， 如 采 我 们 进一步 深入 ， 去 答 试 了 解 clip 属性 是 如 何 
泻 染 的 ， 就 会 发 现 一 些 有 意思 的 事情 ! 

我 们 先 看 一 个 示例 : 

:BOR -4 

width: 300px; height: 100px; 


background-color: #f0f3f9; 


Position: relative; 























Overflow: auto; 

} 

.box > img { 
width: 256px; height: 192px; 
position: absolute; 


} 
此 时 .box 为 定位 元 素 ， 因 此 ， 滚 动 条 显示 得 很 好 ， 如 图 6-63 所 示 。 
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如 果 对 图 片 进行 clip 剪裁 ， 那 效果 又 将 怎样 呢 ? 


.box > img { 
width: 256PX height: 192px; 
Position: absolute; 
clip: rect(0 0 0 0) 7; 

有 


图 片 显然 看 不 见 了 ， 但 是 注意 ， 在 Chrome 浏览 器 下 ， .pox 元 素 的 滚动 条 依旧 存在 ， 如 
图 6-64 所 示 。 








ba vv 





6-63 ”绝对 定位 图 片 可 深 动 6-64 Chrome 下 绝对 定位 图 片 cl ip 隐藏 后 依旧 可 深 动 


这 个 现象 很 有 意思 ， 它 说 明 ， 人 至 少 在 Chrome 浏览 器 下 ，c1lip 仅仅 是 决定 了 哪 一 部 分 是 可 
见 的 ， 对 于 原来 占据 的 空间 并 无 影响 。 然 而 ， 并 不 是 所 有 浏览 右 都 这 么 认为 ， 在 契 和 Firefox 
浏 贤 器 下 是 没有 深 动 条 的 ， 只 有 交 秃 务 的 一 小 气 背 景色 在 那里 。 这 叉 是 “未 定义 行为 ”的 表现 ， 
看 起 来 卫 和 Firefox 对 于 clip 泻 染 采 用 的 是 另外 的 方式 。 

但 是 无 论 怎样 ， 下 面 这 些 特性 大 家 的 认识 都 是 一 致 的 : 使 用 clip 进行 前 裁 的 元 素 其 
clientwWidth 和 clientHeight 包括 样式 计算 的 宽 高 都 还 是 原来 的 大 小 , 从 这 一 点 看 , Chrome 
的 洽 染 似乎 更 合理 。 虽 然 尺 寸 还 是 原来 的 尺寸 ， 但 是 ， 隐 藏 的 区 域 是 无 法 影响 我 们 的 点 击 行为 
的 ， 说 明 clip 隐藏 还 是 很 干脆 的 。 

最 后 总 结 一 下 : clip 隐藏 仅仅 是 决定 了 哪 部 分 是 可 见 的 ， 非 可 见 部 分 无 法 啊 应 点 击 事件 
等 ; 然后， 虽然 视觉 上 隐藏 ， 但 是 元 系 的 矿 寸 依然 是 原本 的 矿 寸 ,在 正 浏 砚 项 和 Firefox 浏览 
器 下 抹 挤 了 不 可 见 区 域 尺 寸 对 布局 的 影响 ，Chrome 浏览 器 却 保留 了 。 

Chrome 浏览 句 的 这 种 特性 表现 实际 上 让 clip 隐藏 有 了 瑕 交 ， 好 在 通 单 使 用 场景 是 看 不 到 
这 个 差异 的 ， 故 影响 甚 微 。 


6.8 absolute 的 流体 特性 



































6.8.1 当 absolute 遇 到 left/top/right/bottom 属性 


当 absolute 机 到 left/top/right/bottom 属性 的 时 候 , absolute 元 素 才 真 正 变 成 
绝对 定位 元 系 。 例如 : 
.box { 


Position: absolute; 
left: 0; top: 0; 
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表示 相对 于 绝对 定位 元 素 包 舍 块 的 左上 角 对 齐 ， 此 时 原本 的 相对 特性 丢失 。 但 是 ， 如 采 我 们 仅 
设置 了 一 个 方 癌 的 绝对 定位 ， 又 会 如 何 呢 ? 例如 : 
.box { 
Position: absolute; 


left: 0; 
} 


此 时 ， 水 平方 回绝 对 定位 ， 但 对 直方 回 的 定位 依然 保持 了 相对 特性 。 
6.8.2 _ absolute 的 流体 特性 


说 到 流体 特性 ， 我 们 通 当 第 一 反应 束 是 <div> 之 类 的 普通 块 级 元 素 。 0 绝对 定位 元 
素 也 共有 类 似 的 流体 特性 ， 当 然 ， 不 是 默认 就 有 的 ， 而 是 在 特定 条 件 下 才 上 共有 ， 这 个 条 件 就 是 
“对 立方 同 同时 友 生 定位 的 时 候 ”。 
left/top/right/lbottom 是 具有 定位 特性 元 素 专 用 的 CSS 属性 , 其 中 left 和 right 
属于 水 平 对 立定 位 方向 ， 而 上 op 和 bottom 属于 焉 直 对 立定 位 方 问 。 
当 一 个 绝对 定位 元 系 ， 其 对 立定 位 方 同 属性 同时 有 其 体 定位 数值 的 时 候 ， 流 体 特性 就 发 生 
了 。 例 如 : 
<div class="box"></div> 
.box { 
Position: absolute; 
left: 0; right: 0; 
} 
如 果 只 有 left 属性 或 者 只 有 rignt 属性 ， 则 由 于 包 于 性 ， 此 时 .box 宽度 是 0。 但 是 在 
本 例 中 ， 因 为 left 和 rignt 同时 存在 ， 所 以 冤 度 就 不 是 0， 而 是 表现 为 “格式 化 宽度 ”， 宽 
上 度 大 小 上 自 适 应 于 .box 包含 块 的 padding box， 也 束 是 说 ， 如 果 包 含 块 padding box 宽度 友和 生变 
化 ，.box 的 贺 度 也 会 跟着 一 起 变 。 
因此 , 假设 .box 元 系 的 包含 块 是 根 元 系 ， 则 下 面 的 代码 可 以 让 .box 元 系 正 好 完全 和 窗 讲 浏 
览 器 的 可 视 襟 口 ， 并 且 如 采 改 变 浏览 器 窗口 大 小 ，.box 会 目 动 跟着 一 起 变化 : 
.box { 
Position: absolute; 
left: 0; right: 0; top: 0; bottom: 0; 
| 
绝对 定位 元 际 的 这 种 流体 目 适 应 特性 从 IE7 就 开始 文 持 了 ， 但 是 出 于 历史 习惯 或 者 其 他 什 
么 原因 ， 很 多 同行 依然 使 用 下 面 这 样 的 写法 : 
.box { 
Position: absolute; 
left: 07 top: 0; 
width: 100%; height: 100%; 
) 
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好 像 也 能 罗 盖 浏览 右 的 可 视窗 口 ， 并 且 用 得 挺 好 。 那 问题 来 了 : 这 两 种 实现 有 什么 区 别 呢 ? 
乍 一 看 ， 效 果 都 是 一 样 的 ， 但 是 骨子里 却 已 经 严重 分 化 了 。 后 者 ， 也 就 是 设 定 宽 高 都 是 100% 
的 那个 .box， 实 际 上 已 经 完全 展 失 了 流动 性 ， 我 们 可 以 通过 添加 简单 的 CSS 声明 让 大 家 一 眼 
融 看 出 兰 别 。 例 如 ， 对 两 者 都 添加 paqddqing :30px: 
.box { 
Position: absolute; 
left: 0; right: 0; top: 0; bottom: 0; 


padding: 30px; 
' 




















.box { 
Position: absolute; 
left: 0; top: 0; 
width: 100%; height: 100%; 
padding: 30px; 
. 


前 者 此 时 宽 高 依然 是 窗 体 可 视 区 域 的 宽 高 ,但 是 ,后 者 此 时 的 尺寸 是 100%+60px, 多 出 了 60px。 
有 人 可 能 会 立马 想到 使 用 box-sizing:border-box, 这样 确实 可 以 让 pagdding 表现 保持 一 
致 ， 但 是 ， 如 条 添加 的 是 margin:30px 了 呢 ? 


.DOX { 
Position: absolute; 
left: 0; right: 0; top: 0; bottom: 0; 
margin: 30px; 


} 








.box { 
Position: absolute; 
left: 0; top: 0; 
width: 100%; height: 100%; 
margin: 30px; 


} 


前 者 上 自动 上 下 左右 留 和 30px， 但 是 后 者 的 布局 已 经 跑 到 窗 体 外 面 去 了 ， 并 不 文 持 margin 
box 的 box-sizing 此 时 也 无 能 为 力 。 

通过 上 面 几 个 例子 可 以 看 到 ， 设 置 了 对 立定 位 属性 的 绝对 定位 元 奈 的 表现 神似 普通 的 
<dqiv> 元 素 , 无 论 设置 padding 还 是 margin, 其 占据 的 空间 一 直 不 变 , 变化 的 束 是 content box 
的 尺寸 ， 这 束 是 典型 的 流体 表现 特性 。 

所 以 ， 如 果 想 让 绝对 定位 元 素 宽 高 目 适 应 于 包含 块 ， 没 有 理由 不 使 用 流体 特性 写法 ， 除 非 是 
蔡 换 元 素 的 拉 伸 。 而 绝对 定位 元 素 的 这 种 流体 特性 比 普 通 元 素 要 更 强大 ， 普 通 元 素 流体 特性 只 有 
一 个 方 同 ， 默 认 是 水 平方 向 ， 但 是 绝对 定位 元 叉 可 以 让 垂直 方向 和 水 平方 向 同时 保持 流动 性 。 

有 人 可 能 还 没 意 识 到 垂直 方 癌 也 保持 流动 性 的 好 处 , 实际 上 , 其 对 我 们 的 布局 非常 有 价值 。 
举 个 最 简单 的 例子 ， 因 为 子 元 素 的 heignt 百分比 值 可 以 生效 了 (IE8 及 以 上 版 本 浏览 器 )， 所 
以 高 度 目 适应 、 高 度 等 比例 布局 等 效果 都 可 以 从 容 实现 了 。 
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6.8.3 absolute 的 margin:auto 居中 


当 绝 对 定位 元 素 处 于 流体 状态 的 时 候 ， 各 个 盒 模型 相关 属性 的 解析 和 普通 流体 元 系 都 是 一 
模 一 样 的 ，margin 负 值 可 以 让 元 素 的 尺寸 更 大 ， 并 且 可 以 使 用 margin:auto 让 绝对 定位 元 
素 保 持 居 中 。 

绝对 定位 元 素 的 margin:auto 的 填充 规则 和 普通 流体 元 素 的 一 模 一 样 : 

。 ”如 果 一 侧 定 值 ， 一 侧 auto，auto 为 剩余 空间 大 小 ; 

。 ”如果 两 侧 均 是 auto， 则 平分 剩余 空间 。 

唯一 的 区 别 在 于 ， 绝 对 定位 元 系 margin:auto 居中 从 IE8 浏览 器 开始 支持 ， 而 普通 元 素 
的 margin:auto 居中 很 早 束 文 持 了 。 

如 果 项 目 不 需 要 省 IE7 浏览 器 的 话 ， 下 面 这 种 绝对 定位 元 素 水 平 牌 直 居 中 用 法 束 可 以 直接 
淘汰 了 : 

.element { 


width: 300px; height: 200px; 
Position: absolute; left: 50%; top: 050%; 








margin- letty :SloO0DX /* 宽度 的 一 半 */ 
margin-top: -100px; /* 高 度 的 一 半 */ 


} 


如 果 绝 对 定位 元 素 的 尺寸 是 已 知 的 ， 也 没有 必要 使 用 下 面 这 种 用 法 ， 因 为 按照 我 的 经 验 ， 
在 有 些 场景 下 ， 百 分 比 transform 会 让 iOS 微 信 闪 退 ， 还 是 尽量 避免 的 好 。 











.element { 

width: 300px; height: 200px; 

Position: absolute; left: 50%; top: 2020%; 

transform: translate(-50%, -50%); /50 旬 为 自 寺 尺寸 曲 一半 :wy 
} 


首 推 的 方法 就 是 利用 绝对 定位 元 素 的 流体 特性 和 margin:auto 的 自动 分 配 特 性 实现 居 
中 ， 例 如 : 


.element 
width: 300px; height: 200px; 
position: absolute; 
left: 0; right: 0; top: 0; bottom: 0; 
margin: auto; 


} 
具体 分 配 细 节 在 4.3 节 已 经 详细 解释 ， 这 里 不 再 闭 述 。 
我 可 以 负责 任 地 告诉 大 家 ， 这 种 方法 非常 好 用 ， 屡 试 不 来 。 











6.9 Position:relative 才 是 大 哥 





如 采 说 float 和 absolute 是 同 父 异 母 的 见 第 关系 ， 那 么 position:relative (下 面 
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简称 relative) 则 是 absolute 的 杀 大 哥 。 

故事 是 这 样 的 : 当年 魔界 圣母 position 生 了 好 几 个 儿子 ,其 中 一 个 就 是 法 力 很 强 也 很 霸 
道 的 absolute， 考 虑 到 日 后 absolute 会 找 float 的 厂 烦 而 去 正常 流 世 界 ， 以 其 个 性 和 霸 
道 的 能 力 ， 一 定 会 影响 正常 流 世 界 的 秩序 ， 于 是 圣母 position 让 其 性 格 敦 实 的 大 儿子 
relative 直接 在 正 稍 流 世 界 生活 ， 帮 忙 上 时 着 absolute， 不 要 让 absolute 这 个 小 麻风 到 处 
春 是 生 非 。 


知道 了 故事 背景 ， 对 relative 的 诸多 特性 我 们 就 很 好 理解 了 。 





























6.9.1 relative 对 absolute 的 限制 


虽然 说 relative/absolute/fixed 都 能 对 absolute 的 “ 包 囊 性 ”以 及 “定位 ” 产 
生 限 制 ， 但 只 有 relative 可 以 让 元 素 依然 保持 在 正 弟 的 文档 汪 中 。 束 好 像 虽 然 唐 僧 、 观 世 音 
营 院 、 如 来 佛祖 都 能 限制 孙悟空 ,但 只 有 唐僧 是 凡 界 中 的 几 人 ， 可 以 不 动 声色 地 把 孙悟空 驯 教 
得 服 服 帖 帖 。 

下 面 举 个 简单 例子 示意 一 下 relative 对 absolute 的 限制 。 下 面 的 CSS 代码 之 前 出 现 
过 ， 是 冲 痢 履 兰 整个 浏览 右 可 视窗 体 去 的 ， 这 出 手 甚 为 霸气 。 

















.DOX { 

Position: absolute; 

left: 0; right: 0; top: 0; bottom: 0; 
} 


现在 有 如 下 的 小 图 标 样式 : 


.jcon { 
width: 20px; height: 20px; 
position: relative; 


} 
并 且 HTML 结构 关系 如 下 : 


<div class="ijcon"> 
<div class="box"></div> 
</div> 
请 问 ， 此 时 .box 尺寸 多 少 ? 
原本 霸气 的 窗 体 尺寸 一 下 子 被 限制 到 这 里 的 小 不 溜 丢 的 20pxx20px， 有 瞬间 从 天 上 挥 到 地 
上 。 最 根本 的 原因 是 ， 此 时 .pox 元 素 的 包含 块 变 成 了 .icon。 








6.9.2 relative 与 定位 

relative 的 定位 有 两 大 特性 : 一 是 相对 目 身 ; 二 是 无 侵入 。 

故事 继续 。 话 说 absolute 被 relative 限制 得 没 脾气 ， 于 是 便 想 尺 想 办 法 要 套套 其 大 
哥 relative 的 技能 ， 看 看 有 没有 什么 漏洞 可 钻 。 

于 是 ， absolute 跑 过 去 找 reLlative， 一 番 寄 输 后 开口 道 :“ 大 哥 ， 听 三 弟 说 你 定位 技 
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能 和 我 们 不 一 样 ， 我 想 看 看 …… 

“可 以 啊 ， 难 得 你 主动 找 我 !”relative 坚 不 犹 殉 地 答 道 。 

“ 那 好 ， 我 数 一 二 三 ， 然 后 我 们 同时 top:0;1left:0 瞬 映 定位 。” 

“好 !” 

二 玉 1 

只 听 “ 咱 ”的 一 声 ，absolute 瞬间 跑 到 了 结 界 的 左上 角 ， 很 是 得 意 ， 此 时 apsolute 发 
现 其 大 哥 依然 原 地 不 动 , 心 想 可 能 是 大 哥 技 能 发 动 时 间 比 较 长 吧 。 然 后 5 分 钟 过 去 了 ,absolute 
实在 义 不 住 了 :“ 大 哥 ， 你 怎么 还 不 定位 啊 ? ” 

“你 在 扯 什 么 啊 ， 我 早 束 已 经 left:0;top:0 定位 了 啊 !” 

absolute 的 额头 上 了 瞬间 挂 下 来 5 条 黑 线 和 一 滴 汗 。 他 组 了 绥 自 己 的 尴 淮 ， 继 续 道 :“ 那 
我 们 换 成 同时 top:100px;left:100px 定位 吧 !” 

“可 以 蚜 !” 

hs = J 

只 上 听 “ 咱 ”的 一 声 ，absolute 有 瞬间 跑 到 了 结 界 的 左上 角 100px 的 地 方 ， 回 头 一 看 大 哥 ， 
只 见 其 慢 修 悠 地 往 右 侧 和 下 方 各 移动 了 100px( 见 图 6-65)! absolute 立马 竖 起 来 大 拇指 : 
“原来 大 哥 定 位 是 这 样子 的 呀 ， 是 相对 于 自 映 进行 偏 移 定 位 的 ， 小 第 我 学 习 了 1!” 

“其 实 不 瞒 你 说 ， 这 是 为 了 限制 你 ， 我 特意 练 就 的 定位 ， 虽 然 活 动 半径 小 了 点 儿 ， 但 是 为 
了 看 好 你 ， 这 点 儿 牺 牲 是 值得 的 。 也 正 因 为 这 个 ， 我 被 世人 称 为 “相对 定位 。” 
J ”absolute 的 额头 上 瞬间 又 多 了 几 根 黑 线 。 
“无 侵入 ”的 意思 是 ， 当 relative 进行 定位 偏 移 的 时 候 ， 一般 情况 下 不 会 影响 周围 元 素 的 布 























局 





故事 继续 。absolute 后 来 仔细 回想 大 哥 的 定位 技能 ， 总 觉得 在 哪里 见 过 ， 后 来 总 算 想 起 
来 ， 好 像 激进 的 margin 属性 定位 跟 大 哥 的 很 像 ， 这 事情 有 必要 验证 一 下 。 于 是 数 日 后 ， 
absolute 威逼 利诱 margin 前 来 和 relative 进行 切磋 ， 而 目 己 则 驮 在 暗中 观察 。 

relative 敦 实 厚重 ， 与 人 为 善 ， 看 margin 前 来 自然 非常 欢迎 ， 于 是 ， 束 有 了 下 面 切 莫 
的 一 幕 ， 同 时 往 上 偏 移 50px。 
切 磅 开始 之 前 ， 大 家 位 置 什么 的 都 是 一 样 的 ， 如 图 6-66 所 示 。 








left: 100px 使 用 margin 定 位 使 用 relative 定 位 











点 击 图 片 应 用 .pk-1 点击 图 片 应 用 .pk-2 

















6-65 ”相对 目 喘 定位 偏 移 示意 6-66 margin/relative 定位 的 初始 态 对 比 


margin 使 用 的 CSS 如 下 : 
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.DK-1 { 

margin-top: -S50px; 
} 
relative 则 是 : 


.DK-2 { 
Position: relative; 
top: -S50px; 

} 


作用 于 图 片上， 结果 从 视觉 效果 看 ， 图 片 最 终 定位 的 位 置 是 一 样 的 ， 但 是 ， 图 族 后 面 的 元 
聚 却 表现 出 了 明显 的 差异 : margin 定位 的 图 片 后 面 的 文字 跟着 上 来 了 ， 而 使 用 relative 定 
位 的 图 片 后 面 的 文字 依然 在 原 地 纹 丝 不 动 ， 中 间 区 域 留 出 了 一 大 块 空 日 ， 如 图 6-67 所 示 。 有 眼见 
为 实 ， 手 动 输入 http://demo.cssworld.cn/6/6-1.php 或 者 扫 下 面 的 二 维 码 。 

















点 击 图 片 应 用 .pk-1 
pa | 


中 着 闭 片 上 去 了 





6-67 margin/relative 定位 对 比 


relative 的 定位 还 有 另外 两 点 值得 一 提 : 相对 定位 元 素 的 left/top/right/bottom 
的 百分比 值 是 相对 于 包含 块 计算 的 ， 而 不 是 目 莱 。 注 间 ， 虽 然 定 位 位 移 是 相对 目 旱 ,但 是 百 分 
比值 的 计算 值 不 是 。 

top 和 bottom 这 两 个 垂直 方向 的 百分比 值 计 算 跟 height 的 百分比 值 是 一 样 的 ， 都 
是 相对 高 度 计算 的 。 同 时 ， 如 果 包 含 块 的 局 度 是 auto， 那 么 计算 值 是 0， 俩 移 无 效 ， 也 惑 
是 次， 如 采 父 元 素 没 有 设 定 高 度 或 者 不 是 “格式 化 高 度 ”， 那 么 relative 类 似 top:20% 
的 代码 等 同 于 top:0。 

当 相 对 定位 元 素 同 时 应 用 对 立方 同 定 位 值 的 时 候 ， 也 就 是 top/bottom 和 left/right 
同时 使 用 的 时 候 ， 其 表现 和 绝对 定位 差异 很 大 。 绝 对 定位 是 尺寸 拉 伸 ， 保 持 流体 特性 ， 但 是 相 
对 定位 却 是 “你 死 我 活 ” 的 表现 ， 也 融 是 说 ， 只 有 一 个 方 癌 的 定位 属性 会 起 作用 。 而 误 强 讨 弱 
则 是 与 文档 流 的 顺序 有 关 的 ， 默认 的 文档 流 是 目 上 而 下 、 从 左 往 右 ， 因此 top/bottom 同时 使 
用 的 时 候 ，lbottom 被 干 控 ; left/right 同时 使 用 的 时 候 ，right 纤 命 。 























.example { 


position: relative; 


top: 10px; 
Elon TO00x: /* 无 效 */ 
bottons: es 和 /* 无 效 */ 


left: 10px; 
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6.9.3 zelLative 的 最 小 化 影响 原则 


“relative 的 最 小 化 影响 原则 ”是 我 目 己 总 结 的 一 套 更 好 地 布局 实践 的 原则 ， 主 要 分 为 
以 下 两 部 分 : 

(1) 尽量 不 使 用 relative， 如 果 想 定位 某 些 元 系 ， 看 看 能 人 否 使 用 “无 依赖 的 绝对 定位 号 

(2) 如 果 场 景 受 限 ， 一 定 要 使 用 relative， 则 该 relative 务必 最 小 化 。 

第 一 点 前 文 有 重点 介绍 ， 应 该 很 好 理解 ， 关 键 是 第 二 点 ,“relative 最 小 化 ”是 什么 意思 ? 

我 们 可 以 看 一 个 简单 的 例子 。 例 如 ， 我 们 希望 在 某 个 模块 的 右上 角 定 位 一 个 图 标 ， 初 始 
HTML 结构 如 下 : 




















<div> 
<img src="icon.png"> 
<p> 内 容 1</p> 
<p> 内 容 2</p> 
<p> 内 容 3</p> 
<p> 内 容 4</p> 


pe 
如 有 果 让 大 家 去 实现 的 话 ， 我 估计 十 有 八 九 都 会 如 下 面 这 样 实现 : 


<div style="position:relative;"> 
<img src="icon.png" style= 
"Position:absolute;top:0;right:0;"> 
<p> 内 容 1</p> 
<p> 内 容 2</p> 
<p> 内 容 3</p> 
<p> 内 容 4</p> 


</div> 





但 是 ， 如 果 采 用 “relative 的 最 小 化 影 啊 原则 ” 则 应 该 是 如 下 面 这 般 实 现 : 
<div> 


<div style="position:relative;"> 
<img src="icon.png" style="position:absolute;top:0;right:0;"> 
Ss 
<p> 内 容 1</p> 
<p> 内 容 2</p> 
< 省 内容 3/DS 
<p> 内 容 4</p> 


ee 
差别 在 于 ， 此 时 relative 影响 的 元 素 只 是 我 们 的 图 标 ， 后 面 的 “内 容 1” 之 类 的 元 系 依 


然 保持 开始 时 干净 的 状态 。 
有 人 可 能 会 有 疑问 : 为 什么 要 多 此 一 举 呢 ? 之 前 的 实现 效果 查 好 的 ， 大 家 都 这 么 使 用 的 ， 
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不 照样 脸 上 洋溢 着 灿烂 的 笑容 ! 

真 的 是 这 样 吗 ? 我 想 大 家 或 多 或 少 都 经 历 过 一 些 关 于 层级 的 问题 ， 在 大 部 分 场景 下 ， 上 面 
的 两 种 实现 并 没有 什么 差异 ， 但 是 页 面 一 旦 复杂 ， 第 一 种 实现 方法 就 会 留 下 隐患 。 因 为 一 个 普 
通 元 素 变 成 相对 定位 元 素 ， 看 上 去 长 相 什 么 的 没有 变化 ， 但 是 实际 上 元 素 的 层 针 顺序 提高 了 ， 
甚至 在 IE6 和 IE7 浏览 器 下 无 须 设置 z-index 就 直接 创建 了 新 的 层 靶 上下文, 会 导致 一 些 绝对 
定位 浮 层 无 论 怎么 设置 z-index 都 会 裤 其 他 元 系 履 兰 。 当 然 ，z-inaqex 无 效 已 经 算是 比较 严 
重 的 问题 了 。 

这 里 我 们 不 妨 看 一 个 看 似 无 伤 大 雅 的 小 问题 ,场景 是 这 样 的 : A 模块 下 方 有 一 个 “B 模块 ” 
这 个 “B 模块 ”设置 了 margin-top:-100px， 和 希望 可 以 覆盖 “A 模块 ”后 面 的 部 分 内 容 ， 此 
时 两 种 实现 的 差异 就 显现 出 来 了 。 

如 果 是 前 面 position:relative 设置 在 容器 上 的 实现 ， 会 友 现 “B 模块 ”并 没有 徐 芒 
“A 模块 ”反而 是 被 “A 模块 ” 禾 盖 了 ! 原因 很 简单 ， 相 比 普通 元 素 ， 相 对 定位 元 又 的 层 登 顺 
序 是 “ 鬼 畜 ”级 别 的 ， 自 然 “A 模块 ”要 履 盖 “B 模块 >。 如 果 要 想 实 现 目 标 效 果 ， 就 需要 给 “B 
模块 ”也 设置 position:relative。 唉 ， 宛 铭 相 报 何 时 了 ? 

但 是 ， 如 果 是 后 面 “relative 的 最 小 化 有 影响 原则 ”的 实现 ， 由 于 relative 只 影响 右上 
角 的 图 标 ,“A 模块 ”后 面 的 内 容 都 还 是 普通 元 素 ， 那么 ， 最终 的 效果 束 是 我 们 希望 的 “B 模块 ” 
窗 新 “A 模块 ”， 不 动 一 兵 一 从 隋 达到 了 预期 目的 ， 电 不 更 哉 ! 

“relative 的 最 小 化 影响 原则 ”不 仅 规避 了 复杂 场景 可 能 出 现 样 式 问题 的 隐患 ， 从 日 后 的 维 
护 角度 讲 也 更 方便 ， 比 方 说 过 了 一 个 月 ， 我 们 不 需要 右上 角 的 网 标 了 ， 直 接 移 除 这 个 relative 
最 小 化 的 单元 即 可 ! 但 是 ， 如 果 relative 是 这 个 容器 上 的 ， 这 上 段 样式 代码 你 敢 删 吗 ? 万 一 其 他 
元 系 定 位 也 需要 呢 ? 万 一 relative 还 有 提高 层 登 顺序 的 作用 呢 ? 留 独 没 问题 ， 删 挥 可 能 出 bug， 
我 想 大 多 数 的 开发 者 一 定 会 留 厦 的 ， 这 也 是 为 什么 随 着 项目 进 程 的 推进 代码 会 越 来 越 见 余 的 原因 。 

从 这 一 点 可 以 看 出 来 ， 项 目 代 码 越 来 越 腔 肿 、 越 来 越 元 余 ， 归 根 结 底 还 是 一 开始 实现 项 目 
的 人 的 技术 水 平和 能 力 火 候 还 不 够 。 实 现时 “ 洋 汶 着 灿烂 的 笑容 ”没什么 好 得 意 的 ， 能 够 让 日 
后 维护 甚至 其 他 人 接手 项 目 维护 的 时 候 也 “洋溢 着 灿烂 的 笑容 ”， 那 才 是 真 历 害 ! 
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定位 属性 值 三 兄弟 的 老 三 position:fixed 固定 定位 是 三 人 中 最 强悍 的 ， 一 副 天 不 怕 地 
不 怕 的 感觉 ， 主 要 表现 为 把 absolute 管 得 服 服 帖 帖 的 relative 对 fixed 是 一 点 儿 办 法 都 
没有 ， 普 通 元 素 想 要 overflow:hidden 剪裁 position:fixed 也 是 病人 说 梦 。 固 定 定 位 之 
所 以 这 么 强悍 ， 根 本 原本 是 其 “包含 块 ” 和 其 他 元 素 不 一 样 。 


6.10.1 position:fixed 不 一 样 的 “包含 块 ” 


position:fixed 国定 定位 元 标的 “包含 块 ” 是 根 元 系 ， 我 们 可 以 将 其 近似 看 成 <ntml> 
元 素 。 换 句 话说 ,唯一 可 以 限制 固定 定位 元 素 的 束 是 <html> 根 元 素 ， 而 根 元 素 就 这 么 一 个 ， 也 
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就 是 全 志 界 只 有 一 个 人 能 限制 position:fixed 元 素 ， 可 见 人 家 强悍 还 是 有 强悍 的 资本 的 。 
所 以 ， 如 果 想 把 某 个 元 素 固 定 定位 在 某 个 模块 的 右上 角 ， 下 和 面 这 种 做 法 是 没有 用 的 : 


<div class="father"> 
<div class="son"></div> 
< 
.father 1{ 
width: 300px; height: 200px; 
position: relative; 
"| 
.Son { 
width: 40px; height: 40px; 


Position: fixed; 





top: 0; right: 0; 
} 


.Son 元 素 只 会 跑 到 窗 体 的 右上 角 ， 是 不 会 在 .father 的 右上 角 的 , relative 对 fixed 
定位 没有 任何 限制 作用 。 

但 是 ， 并 不 是 说 我 们 无 法 把 .son 元 素 精 确定 位 到 .father 的 右上 角 ， 事 实 上 是 可 以 实现 
的 ， 如 何 实现 呢 ? 

和 “无 依赖 的 绝对 定位 ”类似 ， 束 是 “无 依赖 的 固定 定位 >， 利用 absolute/fixed 元 系 
没有 设置 left/top/right/bottonm 的 相对 定位 特性 ， 可 以 将 目标 元 素 定 位 到 我 们 想 要 的 位 
置 ， 处 理 如 下 : 


<div class="father"> 


<div class="right"> 








&nbsp;<div class="son"></div> 
</div> 
</div> 
.father 1{ 
width: 300px; height: 200px; 
Position: relative; 
} 
.right { 
height: 0; 
text-align: right; 
overflow: hidden; 
} 
.Son { 
display: inline; 
width: 40px; height: 40px; 
Position: fixed; 
margin-left: -40px; 
} 


6.10.2 position:fixed 的 absolute 模拟 
有 时 候 我 们 希望 元 素 既 有 不 跟随 深 动 的 固定 定位 效果 ， 双 能 被 定位 元 素 限 制 和 精准 定位 ， 
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那 该 怎么 办 呢 ? 

我 们 可 以 使 用 position:absolute 进行 模拟 ， 原 理 其 实 很 简单 : 页 面 的 滚动 使 用 普通 
元 素 替 代 ， 此 时 滚动 元 素 之 外 的 其 他 元 素 自然 就 有 了 “固定 定位 ”的 效果 了 。 

常规 的 HTML 结构 和 CSS 代码 是 下 面 这 样 的 : 


<html> 
<body> 
<div class="fixed"><div> 
</body> 
</html> 
.fixed { 
position: fixed; 


} 
使 用 position:absolute 进行 模拟 则 需要 一 个 深 动 容器 ， 假 设 类 名 是 .page， 则 有 : 


<html> 
<body> 
<d1iYy Glass=" "sde"> 回 定 定 位 元 关 <diY> 
<div class="fixed"><div> 
</body> 
</html> 
html, body ({ 
height: 100%; 
overflow: hidden; 
} 
.Page { 
height: 100%; 
Overflow: auto; 
} 
.fixed { 
position: absolute; 


} 


整个 网 页 的 深 动 条 由 .page 元 素 产 生 ， 而 非 根 元 素 ， 此 时 .fixed 元 素 虽 然 是 绝对 定位 ， 
但 是 并 不 在 滚动 元 系 内 部 ， 目 然 滚 动 时 不 会 跟随 ， 如 同 固定 定位 效果 ， 同 时 本 喘 绝 对 定位 。 因 
此 ， 可 以 使 用 relative 进行 限制 或 者 overflow 进行 裁 甬 等 。 

然而 ， 将 网 页 的 窗 体 深 动 变 成 内 部 深 动 ， 很 多 窗 体 深 动 相关 的 小 JavaScript 组 件 需 要 跟着 
进行 调整 ， 并 且 可 能 会 丢失 其 他 一 些 浏览 器 内 置 行为 ， 需 要 谨慎 使 用 。 

















6.10.3 position:fixed 与 育 景 锁定 




















壹 层 弹 贸 是 网 页 中 常见 的 交互 ， 其 中 黑色 半 透 明 全 屏 窗 庆 的 聚 层 基 本 上 都 十 使 用 position: 
fixed 定位 实现 的 。 但 是 ， 如 琳 细 致 一 点 儿 束 会 及 现 壹 层 无 法 窗 兽 浏览 旧 右 侧 的 深 动 栏 ， 并 且 
忌 标 滚动 的 时 候 后 面 的 育 景 内 容 依然 可 以 被 滚动 ， 并 没有 被 锁定 ， 体 验 略 打折 扣 。 

如 条 而 望 背景 锁定 ， 该 如 何 实现 呢 ? 
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要 想 解 决 一 个 问题 ， 可 以 从 发 生 这 个 问题 的 原因 入 手 。position:fixed 蒙 层 之 所 以 出 
现 背 景 依然 深 动 ， 那 是 因为 深 动 元 素 是 根 元 了 素 ， 正好 是 BOSICLONS FLIXSa 的 “包含 块 ”。 所 以 ， 
如 果 希 望 背 景 补 锁定 ， 可 以 借鉴 “absolute 模拟 fixed 定位 ”的 思路 ， 让 页 面 滚动 条 由 内 部 
的 普通 元 又 产生 即 可 。 

如 果 网 站 的 深 动 结构 不 方便 调整 ， 则 需要 借助 JavaScript 来 实现 锁定 。 

如 果 是 移动 端 项 目 , 阻止 touchmove 事件 的 默认 行为 可 以 防止 深 动 ; 如 果 是 蝎 面 端 项目， 
ee overflow:hidden。 但 是 ，Windows 操作 系统 下 的 浏览 器 的 滚动 条 都 是 占 

一 定 宽度 的 ， 滚 动 条 的 消失 几 然 会 导致 页 面 的 可 用 宽度 变化 ， 页 面 会 产生 体验 更 粳 糕 的 晃动 
那 怎 么 办 呢 ? 很 简单 ， 我 们 只 需要 找 个 东西 填补 消失 的 滚动 条 融 好 了 。 那 该 找 什 么 东西 
填充 呢 ? 这 时 候 束 轮 到 功勋 齐 越 的 borqez 属性 出 马 了 一 一 消失 的 滚动 条 使 用 同等 宽度 的 透明 
边框 填充 ! 

于 是 ， 在 蒙 层 显示 的 同时 执行 下 面 的 JavaScript 代码 : 


Var widthBar = 17, root = document.documentElement; 





























if (typeof window.innerWidth == ‘'number') { 
widthBar = window.innerWidth - root.clientWidth; 
} 
root.style.overflow = 'hidden';) 
root.style.borderRight = widthBar + 'px solid transparent',; 


隐藏 的 时 候 执 行 下 和 面 的 JavaScript 代码 : 


Var root = document.documentElement; 
root.style.overflow = "'"'; 
root.style.borderRight = 1 1; 


就 可 以 实现 我 们 期 望 的 锁定 效果 了 。 


第 7 
CSS 世界 的 层 登 规 


册 


| 








所 谓 “ 层 登 规 则 ”， 指 的 是 当 网 页 中 的 元 系 友 生 层 登 时 的 表现 规则 。 

凡事 都 有 个 先后 顺序 ， 凡 物 都 有 个 论 资 排 幸 。 例 如 ， 食 等 排队 打 饭 ， 讲 求 先 
到 先 得 ， 忆 不 可 能 一 拥 而 上 ; 先入 学 的 是 学 长 学 姐 ， 先 拜师 的 是 师兄 师姐 。 

0 只 是 , 一般 情 况 下 众生 平等 ， 看 不 出 什么 差异 。 但 是 ， 当 产生 冲突 或 
纠 嚼 的 时 候 ， 显 然 是 不 可 能 做 到 完全 平等 的 。 对 CSS 世界 中 的 元 素 而 言 ， 所 谓 的 “冲突 ” 指 什 
么 呢 ， 其 中 很 重要 的 一 个 层面 残 是 “ 层 舍 哟 示 冲 突 ”。 

默认 情况 下 ， 网 页 内 容 是 没有 偶 移 角 的 垂 百 视觉 圣 现 ， 当 内 容 及 生 层 登 的 时 候 ， 会 有 
一 个 前 后 的 层 登 顺序 产生 ， 有 点 儿 交 似 于 真实 世界 中 “ 论 资 排 辜 ”的 感觉 


7.1 z-index 只 是 CSS 层 登 规则 中 的 一 叶 小 舟 


说 到 层 奢 ， 很 多 人 第 一 反应 束 是 z-index 属性 ， 人 如 其 名 ,“z 轴 有 顺序 ”明摆着 就 是 和 层 
登 规 则 有 关 。 

在 CSS 世界 中 ，z-index 属性 只 有 和 定位 元 系 (position 不 为 static 的 元 叉 ) 在 一 
起 的 时 候 才 有 作用 ， 可 以 是 正 数 也 可 以 是 负数 。 理 论 上 说 ， 数 值 越 大 层级 越 高 ， 但 实际 上 其 规 
则 要 复杂 很 多 ， 这 个 后 面 会 深入 介绍 

但 随 着 CSS3 新 世界 的 到 来 ，z-inqex 已 经 并 非 只 对 定位 元 素 有 效 ，flex 盒子 的 子 元 素 
也 可 以 设置 z-index 属性 ， 不 过 本 书 并 不 予以 讨论 。 

要 知道 ， 网 页 中 绝 大 部 分 元 素 是 非 定 位 元 系 ， 并 且 影 响 层 登 顺 序 的 属性 远 不 止 z-index 
一 个 , 因此 大 家 干 万 不 要 以 为 z-index 属性 就 可 以 代表 CSS 世界 的 层 登 规则 , 实际 上 z-index 
只 是 CSS 层 车 规则 中 的 一 叶 小 和 及，CSS 层 登 规则 的 体 量 要 比 大 家 想象 的 要 大 得 多 。 
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7.2 理解 CSS 握 界 的 层 登 上 下 文 和 层 登 水 平 


7.2.1 什么 是 层 全 上下文 


层 革 上下文 ， 瑞 文 称 作 stacking context， 是 HTML 中 的 一 个 三 维 的 概念 。 如 果 一 个 元 素 舍 
有 层 冯 上下文 ， 我 们 可 | Po 轴 上 就 “高 人 一 等 ”。 
这 里 出 现 了 各 的 是 什么 呢 ? N 
其 表示 的 是 用 户 本 证 二 敌 之 间 这 条 看 不 见 的 垂直 线 ， SS 写 
即 图 7-1 中 的 这 条 水 平 线 。 ps 小 让 NN | 
层 合 上 下 文 是 一 个 概念 , 跟 “ 块 状 格式 化 上 下 文 ” (5 | 
(BFC) 类 似 。 然 而 ， 概 念 这 个 东西 是 比较 虚 、 比 较 ” ~， 上 
抽象 的 ， 要 想 轻 松 理解 ， 我 们 需要 将 其 具象 化 。 
怎么 个 具象 化 法 呢 ? 我 们 可 以 把 层 琶 上 下 文理 忆 
解 为 一 种 “ 层 乱 结 办 自 成 一 -个 小 世界 。 这 个 小 世 图 7-1 z 轴 示意 
界 中 可 能 有 其 他 的 “ 层 肢 结 界 ”而 自身 也 可 能 处 于 其 他 “ 层 肢 结 界 ” 中 。 


7.2.2 什么 是 层 登 水平 


再 来 说 说 “ 层 登 水 平 ”。 层 登 水 平 ， 更 文 称 作 stacking level， 决 定 了 同一 个 层 登 上 下 文中 元 
素 在 z 轴 上 的 显示 顺序 。level 这 个 词 很 容易 让 我 们 联想 到 现实 世界 中 的 论 资 排 府 。 现 实 世 界 中 ， 
每 个 人 都 是 独立 的 个 体 ， 包 括 同 卵 双胞胎 ， 有 差异 惑 有 区 分 。 例 如 ， 双 胞 胎 虽 然 长 得 像 一 个 模 
子 里 出 来 的 ， 但 实际 上 出 生 时 间 还 是 有 先后 的 ， 先 出 生 的 那个 就 大 ， 是 大 哥 或 大 姐 。 网 页 中 的 
元 素 也 是 如 此 ， 页 面 中 的 每 个 元 素 都 是 独立 的 个 体 ， 它 们 一 定 是 会 有 一 个 次 似 的 排名 顺序 的 存 
在 。 而 这 个 排名 顺序 、 论 资 排 辈 就 是 这 里 所 说 的 “ 层 车 水 平 ”。 

显而易见 ， 所 有 的 元 系 都 有 层 登 水 平 ， 包 括 层 登 上 下 文 元 素 ， 也 包括 普通 元 素 。 然 而 ， 对 
普通 元 素 的 层 登 水 平 探讨 只 局 限 在 当前 层 登 下 文 元 素 中 ,为 什么 呢 ? 因 为 不 如 此 就 没有 意义 
层 营 上 下 文本 里 就 是 一 个 强力 的 “ 层 著 结 界 ”， 而 普通 元 系 的 层 车 水 平 是 无 法 突破 这 x 个 结 界 和 纺 
和 水 平 的 。 

要 注意 的 是 ， 诸 位 和 于 万 不 要 把 层 倒 水 平和 CSS 的 z-index 属性 混为一谈 。 尽 管 某 些 情 
a 水 平 , 但 是 只 限于 定位 元 素 以 及 flex 盒子 的 孩子 元 素 ; 而 层 
营 水 平 所 有 的 元 素 都 存在 。 


7.3 理解 元 系 的 层 合 顺序 


再 来 说 说 层 著 顺序 。 层 车 顺序 ， 瑞 文 称 作 stacking order， 表 示 元 素 发 生 层 膨 时 有 着 特定 的 
垂直 显示 有 顺序。 注意 ， 这 里 跟 上 面 两 个 不 一 样 ， 上 面 的 “ 层 登 上 下 文 ” 和 “ 层 登 水 平 ” 是 概念 
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而 这 里 的 “ 层 骆 顺序 ”是 规则 。 
在 CSS 2.1 的 年 代 ， 在 CSS3 新 世界 还 没有 到 来 的 时 候 (注意 这 里 的 前 提 )， 层 车 顺序 规则 
如 图 7-2 所 示 。 


层 殴 上 下 文 
background/border 


负 z-index 


block 块 状 水 平 盒子 





7-2 ”CSS 世界 层 登 顺序 规则 

>< 

(1) 位 于 最 下 面 的 packground/border 特 指 层 登 上 下 文 元 素 的 边框 和 背景 色 。 每 一 个 
层 登 顺序 规则 仅 适 用 于 当前 层 登 上下文 元 素 的 小 世界 。 

(2) inline 水 平 盒子 指 的 是 包括 inline/inline-block/inline-table 元 素 的 “ 层 
登 顺序 ?”， 它 们 都 是 同等 级 别 的 。 

(3) 单纯 从 层 千 水平 上 看 ， 实 际 上 z-index:0 和 z-index:auto 是 可 以 看 成 是 一 样 的 。 注 
意 这 里 的 措 群 一 一 “单纯 从 层 登 水 平 上 看 ”实际 上 ， 两 者 在 层 登 上 下 文 领域 有 着 根本 性 的 差异 。 

下 面 我 要 问 一 个 有 意思 的 问题 ， 大 家 有 没有 想 过 ， 为 什么 内 联 元 素 的 层 羞 顺序 要 比 浮动 元 

素 和 块 状元 系 都 高 ? 

为 什么 呢 ? 我 明明 感觉 序 动 元 素 和 块 状 元 素 要 更 强 一 点 啊 。 我 就 不 夹 天 子 了 ， 直 接 看 图 7-3 
中 的 标注 说 明 。 














层 称 上 下 文 


< 一 一 斗志 
background/border 靶 bi 


block 块 状 水 平 盒子 





7-3 ”CSS 志 界 层 车 顺序 类 型 标注 
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background/border 为 效 饰 属性 ,浮动 和 块 状元 素 一 般 用 作 布 局 , 而 内 联 元 系 都 是 内 容 。 
网 页 中 最 重要 的 是 什么 ? 当然 是 内 容 了 ! 尤其 是 CSS 世界 是 为 本 
更 好 的 图 文 展示 而 设计 的 ， 因 此 ,一定 要 让 内 容 的 层 车 顺序 相当 
高 ， 这 样 当 发 生 层 垂 时 ， 重 要 的 文字 、 图 片 内 容 才 可 以 优先 显示 。 册 74 汉 动 元 来 科 广 生硬 归 有 
在 屏 医 上 。 例 如 ， 文 字 和 部 动 图 片 重 夺 的 时 候 ， 如 图 7-4 所 示 。 文字 在 上 面 


7.4 务必 牢记 的 层 登 准则 


下 面 这 两 条 是 层 登 领域 的 黄金 准则 。 当 元 素 发 生 层 琶 的 时 候 ， 其 覆盖 关系 遵循 下 面 两 条 准则: 

(1) 谁 大 谁 上 : 当 具 有 明显 的 层 羞 水 平 标识 的 时 候 ， 如 生效 的 z-index 属性 值 ， 在 同一 
个 层 登 上 下 文 领 域 ， 层 登 水 平 值 大 的 那 一 个 履 盖 小 的 那 一 个 。 

(2) 后 来 后 上 : 当 元 素 的 层 琶 水 平一 致 、 层 登 顺 序 相 同 的 时 候 ， 在 DOM 流 中 处 于 后 面 的 
元 素 会 敢 盖 前 面 的 元 素 。 

在 CSS 和 HTML 领域 ， 只 要 元 素 发 生 了 重 磊 ， 都 离 不 开 上 面 这 两 条 黄金 准则 。 因 为 后 面 
会 有 多 个 实例 说 明 ， 这 里 就 到 此 为 止 。 


7.5 深入 了 解 层 从 上 下 文 




















































































7.5.1 层 蓓 上 下 文 的 特性 


层 登 上 下 文 元 素 有 如 下 特性 。 

。 层 善 上下文 的 层 闭 水 平 要 比 普通 元 素 高 (原因 后 面 会 说 明 )。 

。 层 闭 上 下 文 可 以 阻 断 元 系 的 混合 模式 (参见 http:/www.zhangxinxu.com/wordpress/?p= 
5155 的 这 篇 文章 的 第 二 部 分 说 明 )。 

。 层 且 上 下 文 可 以 髓 僚 , 内 部 层 营 上 下 文 及 其 所 有 子 元 素 均 受制 于 外 部 的 “ 层 营 上 下 文 ”。 

。 每 个 层 营 上 下 文 和 兄 第 元 素 独 立 ， 也 就 是 说 ， 当 进行 层 夺 变化 或 泻 染 的 时 候 ， 只 需要 
考虑 后 代 元 系 。 

。 每 个 层 且 上下文 是 自 成 体系 的 ， 当 元 系 发 生 层 车 的 时 候 ， 整 个 元 系 被 认为 是 在 父 层 鞋 
上 上 下 区 的 属 晤 大 犀 下 。 


7.5.2” 层 琶 上 下 文 的 创建 


和 块 状 格式 化 上 下 文 一 样 ， 层 车 上 下 文 也 基本 上 是 由 一 些 特定 的 CSS 属性 创建 的 。 我 将 其 
总 结 为 3 个 流派 。 

(1) 天 生 派 : 页 面 根 元素 天 生 具 有 层 登 上 下 文 ， 称 为 根 层 登 上 下 文 。 

(2) 正统 派 : z-index 值 为 数值 的 定位 元 素 的 传统 “ 层 阁 上 下 文 ”。 

(3) 扩招 派 : 其 他 CSS3 属性 。 
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根 层 蕉 上 下 文 

根 层 登 上 下 文 指 的 是 页 面 根 元 系 ， 可 以 看 成 是 <htm1> 元 素 。 因 上 此， 页面 中 所 有 的 元 系 一 
定 处 于 至 少 一 个 “ 层 登 结 界 ”中 。 

2. 定位 元 素 与 传统 层 琶 上 人 下文 

对 于 position 值 为 relative/absolute 以 及 Firefox/IE 浏览 器 (不 包括 Chrome 浏览 
器 ) 下 含有 position:fixed 声明 的 定位 元 素 ， 当 其 z-index 值 不 是 auto 的 时 候 , 会 创建 
层 著 上 下 文 。 

知道 了 这 一 点 ， 有 些 现象 就 好 理解 了 。 





HTML 代码 如 下 : 
<div style="position:relative; z-index:auto;"> 

<1== 美女 --> 

<img src="1.jpg" style="position:absolute; z-index:2;"> 
</div> 
<div style="position:relative; z-index:auto;"> 

< ! 一 一 美景 一 一 > 

<img src="2.jJpg" style="position:relative; z-index:1;"> 
</div> 


结果 如 图 7-5 所 示 。 效 果 符 合 预 期 ， 毕 葛 “ 美 女 ” 图 片 的 z-index 值 是 2， 而 “美景 ”图 
厂 的 z-index 是 1。 

下 面 我 们 对 父 级 简单 调整 一 下 ， 把 z-index:auto 改 成 层 告 水平 一样 高 的 z-index:0。 
代码 如 下 : 


<div style="position:relative; z-index:0;"> 


<!-- 美女 --> 
<img src="1.jpg" style="position:absolute; z-index:2;"> 
</div> 
<div style="position:relative; z-index:0;"> 
<1== SR 
<img src="2.jpg" style="position:relative; z-index:1;"> 
</div> 


结果 会 肥 现 窗 盖 关系 居然 反 过 来 了 ， 此 时 “美景 ”图 片 宪 雷 在 了 “美女 ”图 片 之 上 ， 如 图 7-6 所 示 。 














7-5 “美女 ” 顽童 在 66 s 景 ” a 7-6 66 景 ” 顽童 在 “美女 ” 0 
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眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/7/5-1.php 或 者 扫 右 侧 的 二 维 码 。 

为 什么 小 小 的 改变 会 产生 相反 的 结果 呢 ? 差别 就 在 于 ，z-index: 
auto 有 所 在 的 <div> 元 系 是 一 个 普通 定位 元 素 ， 于 是 ， ed " 
素 的 层 登 比较 区 不 受 父 级 的 影响 ， 两 者 直接 套用 “ 层 登 黄金 准则 ”。 
两 个 <img> 元 素 有 着 明显 不 一 的 z-index 值 ， 因 此 遵 a Ls : 
则 ， 于 是 ，z-index 为 2 的 那个 “美女 ”就 显示 在 -index 为 1 的 “美国 性 入 
5 

而 z-index 一 旦 变 成 数值 ， 哪 怕 是 0， 就 会 创建 一 个 层 倒 上 和 下文。 此 时 ， 层 县 规则 就 发 
生 了 变化 。 层 膨 上 下 文 的 特性 里 面 最 后 一 条 是 自 成 体系 。 两 个 <img> 元 素 的 层 车 顺序 比较 变 成 
了 优先 比较 其 父 级 层 登 上 下 文 元 素 的 层 登 顺序 。 这 由 于 外 面 的 两 个 <div> 元 素 都 是 
z-indqex:0， 两 者 层 登 顺序 一 样 大 ， 此 时 遵循 “ 层 登 黄金 准则 ”的 另外 一 个 准则 “后 来 居 上 ? 
根据 在 DOM 文档 流 中 的 位 置 决 定 谁 在 上 面 ， 于 是 ， 0 “美景 ” 束 目 然而 然 显 示 在 “ 美 
女 ” 上 面 了 。 对 ， 没 错 ，<img> 元 系 上 的 z-index 没 起 作用 ! 

有 时 候 ， 我 们 在 网 页 重 构 的 时 候 会 发 现 z-index 艇 套 错乱 ， 这 时 要 看 看 是 不 是 受 父 级 的 
层 合 上 下 文 元 素 干 扰 了 ， 可 能 束 舱 然 开明 了 。 但 我 还 是 提 一 下 ，IE6 和 IE7 浏览 句 有 个 bug， 惑 
是 z-index:auto 的 定位 元 系 也 会 创建 层 登 上 下 文 。 这 就 是 过 去 IE6 和 IE7 的 z-index 会 折 
腾 死 人 的 原因 。 

我 再 提 一 下 Position:fixed。 在 过 去 ， position:fixed 和 relative/ absolute 
在 层 苹 上 下 文 这 一 块 是 一 样 的， 都 是 需要 z-index 为 数值 才 行 。 但 是 ， 不 知道 什么 时 候 起 ， 
Chrome 等 WebKit 内 核 浏 览 器 下 , position:fixed 元 素 天 然 层 铬 上 下 文 元 系 , 无 须 z-index 
为 数值 。 根 据 我 的 测试 ， 目 前 理 和 Firefox 仍 是 老 套 路 。 

3. CSS3 与 新 时 代 的 层 琶 上 下 文 

CSS3 新 世界 的 出 现 除 了 带 来 了 新 属性 ， 还 对 过 去 的 很 多 规则 发 出 了 挑战 ， 其 中 对 层 装 
下 文 规则 的 影响 显得 特别 突出 。 

(1) 元 素 为 flex 布局 元 素 〈 父 元 素 display:flex|inline-flex)， 同 时 z-index 
值 不 是 auto。 

(2) 元 素 的 opacity 值 不 是 1。 

(3) 元 素 的 transform 值 不 是 none。 

(4) 元 系 mix-blend-mode 值 不 是 normal。 

($7 元 订 轩 于 客人 伯 人 全 呈 Ones 

(57) TE edlotionIvE Leolate: 

(7) 元 系 的 wi11-change 属性 值 为 上 面 2~6 的 任意 一 个 (如 will-change:opacity、 
will-chang:transfornm 等 )。 

(8) 元 素 的 -webkit-overflow-scrolling 设 为 touch。 

本 书 主要 介绍 CSS 世界 的 知识 ， 因 此 关于 CSS3 新 世界 的 内 容 束 说 这 么 多 。 
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7.5.3” 层 靶 上 下 文 与 层 色 顺序 


本 章 多 次 提 到 ， 一 旦 普通 元 素 具 有 了 层 辣 上 下 文 ， 其 层 羞 顺序 就 会 变 蜗 。 那 它 的 层 车 顺序 
究竟 在 哪个 位 置 、 哪 个 级 别 呢 ? 

这 里 需要 分 两 种 情况 讨论 : 

(1) 如 琳 层 车 上 下 文 元 素 不 依赖 z-index 数值， 则 其 层 登 顺序 是 z-index:auto， 可 看 
成 z:index:0 级别; 

(2) 如 果 层 奢 上 下 文 元 系 依赖 z-index 数值 ， 则 其 层 羞 顺序 由 z-index 值 决 定 。 

我 们 上 面 提供 的 层 车 顺序 图 实际 上 还 缺少 其 他 重要 信息 。 我 义 花 工夫 重新 绘制 了 一 个 更 完 
整 的 7 阶层 登 顺 序 图 ， 如 图 7-7 所 示 。 


层 合 上 下 文 
background/border 


block 块 状 水 平 盒子 























float 浮 动 盒子 
inline 水 平 盒子 


z-index:auto 或 看 成 z-index:0 
不 依赖 z-index 的 层 夫 上 下 文 


正 z-index 
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这 下 大 家 应 该 知道 为 什么 定位 元 素 会 层 车 在 普通 元 系 的 上 和 面 了 吧 ? 其 根本 原因 就 是 : 元 系 
一 旦 成 为 定位 元 素 ， 其 z-index 就 会 目 动 生效 ， 此 时 其 z-index 就 是 默认 的 auto， 也 就 是 
0 级别, 根据 上 面 的 层 著 顺序 表 , 加 会 履 盖 1n1ine 或 block 或 float 元素。 而 不 文 持 z-inadex 
的 层 登 上 下 文 元 素 天 然 是 z-index:auto 级 别 ， 也 融 意 味 着 ， 层 登 上 下 文 元 素 和 定位 元 际 是 
一 个 层 县 顺序 的 ， 于 是 当 它 们 发 生 层 登 的 时 候 ， 遭 循 的 是 “后 来 居 上 ”准则 。 

我 们 可 以 看 一 个 例子 : 


<img Strc="1.]pg" style="position:relative"> 


























<img src="2.jJpg" style="transform:scale(1);"> 
这 符合 “后 来 居 上 ”准则 ,“ 美 景 ” 禾 盖 在 “美女 ”之 上 ， 如 图 7-8 所 示 。 


<img src="2.jpg" style="transform:scale (1);"> 





<img src="1.jpg" style="position:relative"> 


这 同样 符合 “后 来 居 上 ”准则 ,“ 美 女 ” 乾 再 在 “美景 ”之 上 ， 如 图 7-9 所 示 。 
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你 会 发 现 ， 两 者 样式 一 模 一 样 ， 只 是 在 DOM 流 中 的 位 置 不 一 样 ， 这 导致 它们 的 层 受 表现 
不 一 样 ， 后 和 面 的 图 片 在 前 面 的 图 片 的 上 面 显 示 。 这 就 说 明 层 车 上 下 文 元 取 的 层 闭 顺序 束 古 
z-index:auto 级 别 。 


最 后 分 享 一 个 与 层 合 上 下 文 相关 的 有 趣 现象 。 








7-8 66 景 ” 履 兰 在 “美女 ” se 民 7-9 “美女 ” 和 窗 盖 在 66 景 ” 人 


在 实际 项 目 中 ， 我 们 可 能 会 渐进 使 用 CSS3 的 fadeIn 淡 入 animation 
效果 增强 体验 ， 于 是 我 们 可 能 就 会 过 到 类 似 下 面 的 现象 ， 手 动 输入 
http://demo.cssworld.cn/7/5-2.php 或 者 扫 右 侧 的 二 维 码 。 有 一 个 绝对 定位 的 黑色 半 
透明 层 敌 盖 在 图 片上 ,默认 显示 如 网 7-10 所 示 。 但 是 ,一 旦 图 片 开始 走 fadeIn 
淡出 的 CSS3 动画 ， 文 字 就 跑 到 图 片 后 面 去 了 ， 因 为 文字 一 直 是 100% 透 明 的 人 
纯 白 色 ， 文 字 变 淡 是 因为 跑 到 图 片 后 面 ， 而 图 片 半 透 明 ， 文 字 罕 透 显示 而 已 ， 如 图 7-11 所 示 。 














只 有 图 片 淡出 ， 文案 一 直 100% 透 明 





图 7-10 默认 的 黑色 半 透 明 履 盖 图 7-11 图 片 淡出 ， 文 字 跑 到 图 片 后 面 


为 什么 会 这 样 ? 实际 上 ， 学 了 本 节 的 内 容 后 就 很 容易 理解 了 。fadeIn 动画 本 质 是 
opacity 透明 度 的 变化 : 


Qkeyframes faqeIn ({ 
0% { 
opacity: 0; 
} 
100% { 
opacity: 1; 
} 
} 
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要 知道 , opacity 的 值 不 是 1 的 时 候 , 是 具有 层 登 上 下 文 的 , 层 登 顺序 是 z-index:auto 
级 别 ， 跟 没有 z-index 值 的 absolute 绝对 定位 元 取 是 平起平坐 的 。 而 本 实例 中 的 文字 元 系 
在 图 片 元 素 的 前 面 ， 于是， 只 要 CSS3 动画 不 是 最 终 一 瞬间 的 opacity:1， 位 于 DOM 流 后 面 
的 图 片 惑 会 遵循 “后 来 居 上 ”准则 而 畴 善文 字 。 

知道 原因 ， 想 要 解决 这 个 问题 就 很 简单 了 : 

(1) 调整 DOM 流 的 先后 顺序 ; 

(2) 提高 文字 的 层 羞 顺序， 例如， 设置 z-index:1。 


7.6 z-index 币值 深入 理解 


首先 明 硝 一 点 ，z-index 是 支持 负 值 的 ， 例 如 z-index:-1 或 者 z-index:-99999 部 
是 可 以 的 。 按 照 我 多 年 面试 新 人 的 结果 来 看 ， 非 常 多 的 人 都 不 知道 z-index 属性 文 持 负 值 ， 
这 让 人 很 意外 一 一 这 可 以 说 是 CSS 世界 的 常识 啊 ! 我 想 了 一 下 ， 或 许 因为 这 些 人 的 知识 都 是 源 
目 项 目 ， 如 果 项 目 用 不 到 自然 束 不 知道 。 

确实 ， 你 不 知道 z-index 支持 负 值 并 不 影响 现在 的 开发 ， 需 求 可 以 通过 其 他 方式 实现 ， 但 
是 存在 既 有 道理 ， 你 不 知道 并 不 表示 没有 用 。 一 旦 掌握 透彻 了 ， 你 会 发 现 ， 本 来 很 麻烦 的 实现 原 
来 可 以 这 么 简单 地 实现 ; 你 会 友 现 ， 当 遇 到 一 些 理 手 问 题 的 时 候 ， 多 了 一 种 解 题 思路 ; 如 此 等 等 。 

那 z-index 具体 的 表现 规则 又 是 怎样 的 呢 ? 

很 多 人 “包括 我 ) 一 开始 的 时 候 ， 以 为 一 个 定位 元 素 设置 z-index 负 值 ， 束 会 跑 到 页 面 的 背 
后 ， 隐 藏 摊 ， 看 不 到 了 。 结 果实 际 上 是 有 时 候 确实 隐藏 了 了， 但 有 时 候 又 隐藏 不 反 。 为 什么 会 这 样 ? 

因为 z-index 负 值 的 最 终 表 现 并 不 是 单一 的 ， 而 是 与 “ 层 登 上 下 文 ” 和 “ 层 县 顺序 ” 密 
切 相 关 。 前 面 展 示 的 层 登 顺序 规则 7 阶 图 ， 其 中 最 下 和 面 的 2 阶 是 理解 z-index 负 值 表现 的 关 
键 ， 如 图 7-12 所 示 。 er 

图 7-12 中 已 经 很 明显 地 标明 了 ，z=-inaqex 负 值 元 又 的 background/border 
层级 是 在 层 闭 上 下 文 元 聚 上 耐 、block 元 系 的 下 而 ,也 就 是 负 z-index 
z-index 虽然 名 为 负数 层级 ， 但 依然 无 法 突破 当前 层 登 上 下 
文 所 包裹 的 小 世界 。 

我 们 通过 下 面 几 个 小 例子 加 深 一 下 理解 。 首 先 HTML ”网 7 12 “ 层 芝 顺序 ”最 底层 2 阶 
都 是 一 臻 的， 如 下 : 


<div class="box"> 



























































<img src="1.jJpg"> 
</div> 


先 看 下 面 的 CSS 代码 : 


.box { 
background-color: blue; 
} 


.box > img { 
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position: relative; 
z-index: -1;} 
right: ~—50px; 

} 


此 时 .box 是 一 个 普 普 通通 的 元 素 , 图 片 元 聚 所 在 的 层 营 上 下 文 元 素 一 定 是 .box 的 茶 个 祖 
先 元 隶 。 好 了 ， 知 道 这 么 多 足够 了 了， 现在 再 回顾 一 下 了 刚刚 出 现 的 图 7-13 所 示 的 这 张 图 。 
图 7-13 中 非常 明显 地 标明 了 z-index 负 值 在 block 元 素 的 下 面 。 本 例 中 , 图 片 是 z-index 
负 值 元 素 , .box 是 block 元 素 , 也 就 是 图 片 应 该 在 .box 元 素 的 后 面 显示 ,因此 ,图 片 会 被 .box 
元 丢 的 监 色 背 景 敢 兰 。 最 后 的 结 末 确 实 如 此 ， 如 图 7-14 所 示 。 

















层 全 上下文 
background/border 


负 z-index 


block 块 状 水 平 盒子 








7-13 ”z-index 负 值 在 block 元 素 下 面 7-14 图 片 在 瘤 色 背景 色 之 下 
现在 ， 我 们 给 .pox 元 素 加 个 样式 ， 使 其 具有 层 半 上下文 。 很 多 CSS 属性 都 可 以 ， 我 们 这 
里 天 使 用 不 影响 视觉 表现 的 transform 属性 示意 如 下 : 


.box { 
background-color: blue; 








transform: Scale(1) ; 
} 
.box > img ({ 
position: relative; 
z-index: -1;} 
right: ~—50px; 
| 


CSS3 transform 可 以 让 元 素 具 有 新 的 层 登 上 上下文， 于是， 对 照 几 7-1$， 非 铝 明 显 地 标明 
了 z-index 负 值 在 层 阁 上 下 文 元 素 的 背景 色 之 上 ， 也 就 是 说 ,这 里 z-index 是 负 值 的 图 片 元 
系 应 该 在 .box 元素 的 上 面 。 最 后 的 结果 确实 如 此 ， 如 图 7-16 所 示 。 





层 登 上下文 
background/border 


block 块 状 水 平 盒子 


7-15 z-index 负 值 在 “ 层 登 上 下 文 ” 之 上 7-16 ”图 片 在 蓝 色 背景 色 之 上 
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眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/7/6-1.php 或 者 扫 右 侧 的 二 维 码 。 

可 以 这 么 说 , z-index 负 值 泻 染 的 过 程 就 是 一 个 寻找 第 一 个 层 车 上下文 [ea] 
元 素 的 过 程 ， 然 后 层 闭 顺序 止步 于 这 个 层 闭 上 下 文 元 素 。 1 

明白 了 这 一 点 ， 束 可 以 理解 为 何 z-index 负 值 隐藏 元 素 有 时 候 确实 隐 
疾 ， 但 有 时 候 又 隐藏 不 挥 了 。 

那 z-index 负 值 在 实际 项 目 中 有 什么 用 呢 ? 具体 作用 如 下 。 

(1) 可 访问 性 隐藏 。z-index 负 值 可 以 隐藏 元 素 ， 只 需要 层 登 上 下 文 内 的 某 一 个 父 元 素 加 
个 背景 色 区 可以。 扎 与 clip 隐藏 相 比 的 一 个 优势 是 ， 元 素 无 顷 绝 对 定位 ， 设 置 
position:relative 也 可 以 隐藏 ， 男 一 个 优势 是 它 对 原来 的 布局 以 及 元 素 的 行为 没有 任何 影 
响 ， 而 clip 隐藏 会 导致 控件 focus 的 焦点 发 生 细微 的 变化 ， 在 特定 条 件 下 是 有 体验 问题 的 。 
它 的 不 足 之 处 耽 是 不 具有 普 过 适用 性 ， 需 要 其 他 元 系 配 合 进行 隐藏 。 

(2) IE8 下 的 多 背景 模 拟 。CSS3 中 有 一 个 多 背景 特性 ， 就 是 一 个 background 可 以 写 多 
个 背景 图 。 虽 然 IE8 浏览 器 不 支持 多 背景 特性 ， 但 是 IE8 浏览 器 支持 伪 元 素 ， 于 是 ，IE8 理论 上 
也 能 实现 多 背景 ， 这 个 背景 最 多 3 个 ， 好 在 绝 大 多 数 场景 3 个 背景 图 足 天 。 最 奢 烦 的 其 实 是 这 
个 伪 元 素 生 成 的 背景 一 定 是 使 用 absolute 绝对 定位 ， 以 免 影 响 内 容 的 布局 。 于 是 问题 来 了 ， 
绝对 定位 会 畴 兰 常 规 的 元 闵 ， 此 时 则 必须 借助 z-index 负 值 ， 核 心 CSS 代码 如 下 : 


.box { 
background-image: (1.Pnd) ; 
























































position: relative; 
z-index: 0; /* 创建 层 攻 上下文 */ 
} 
.box:before, 
.box:after { 
content: ''，; 
position: absolute; 
z-index: 一 ，; 
.box:before { 
background-image: (2.png); 
| 
.box:after { 
background-image: (3.png); 
} 


此 时 ， 就 算 .box 元 素 里 面 是 纯 文 字 ， 伪 元 素 图 片 照样 在 文字 下 面 ， 如 此 广泛 的 适用 场景 
使 上 面 的 处 理 几 乎 可 以 作为 通用 的 多 背景 模拟 实现 准则 来 实现 了 : 

<div class="box"> 我 是 一 段 纯 文字 .. .</div> 

(3) 定位 在 元 素 的 后 面 。 我 们 直接 看 一 个 模拟 纸张 效果 的 例子 ， 该 效果 的 亮点 是 纸张 的 边 
角 有 卷 起 来 的 效果 ， 因 为 底 边 的 阴影 看 起 来 更 有 角度 ， 如 图 7-17 所 示 。 如 果 图 7-17 因 打 印 原 
因 看 得 不 真切 的 话 ， 可 以 手动 输入 http://demo.cssworld.cn/7/6-1.php 或 者 扫 下 面 的 二 维 码 杀 目 感 
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“下 2 让 





图 7-17 纸张 边 角 卷 起 来 的 阴影 
HTML 结构 大 致 如 下 : 


<div class="container"> 


<div class="page"> 标 题 和 内 容 </div> 
</div> 


其 中 ，.container 是 灰色 背景 元 素 ，.page 是 黄色 背景 的 纸张 元 素 ， 关 键 CSS 如 下 : 


.Container { 
background-color: #666; 
/* 创建 层 琶 上 下 文 */ 
position: relative; 
z-index: 0;，; 
’ 
.Page { 
background-color: #f4f39e; 
position: relative; 
} 
/* 边 角 卷 边 阴影 */ 
.page:before, .page:after { 
content: ™"，; 
width: 90%; height: 20%; 
box-shadow: 0 8px 1l6px rgba(0,0,0,.3); 
position: absolute; 
/* 层 且 上 下 文 (灰色 背景 ) 之 上 ， 定 位 元 素 〈 黄 色 纸 张 ) 之 下 */ 
z-index: 一 1; 
， 
/* 边 角 卷 边 阴 影 定 位 和 角度 控制 */ 
.page:before { 
transform: skew(-l5deg) rotate (-D5aqed) ; 
transform-origin: left bottom; 
left: 0; bottom: 0;，; 
} 
.Page:after { 
transform: skew(l5deg) rotate (Daqed) ; 
transform-origin: right bottom; 
right: 0; bottom: 0); 
} 


、 


.container 灰色 背景 通过 position:relative;z-index:0 创建 了 层 登 上 下 文 ，.page 
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仅 有 position:relative 而 没有 设置 z-index 值 ， 因 此 只 能 算 z-index:auto 程度 的 定 
位 元 素 ， 于 是 ，z-index:-1 两 个 边 角 了 阴影 束 完美 地 藏 在 了 层 革 上下文 (灰色 背景 ) 之 上 、 普 
通 定 位 元 素 〈 黄 色 纸 张 ) 之 下 (如 图 7-18 所 示 标 注 )， 隐 藏 了 丑陋 的 细 市 ， 展 示 了 完美 的 边 角 
阴影 ， 实 现 了 最 终 细 展 的 样式 效果 。 





zindewauto 或 看 成 x-index:0 ps 


7-18 z-index:-1 边 角 阴 影 在 本 案例 中 的 层 闭 顺序 位 置 
7.7 z-index“ 个 犯 ”准则 


此 准则 内 容 如 下 : 对 于 非 浮 层 元 素 ， 避 免 设 置 z-index 值 ，z-index 值 没 有 任何 道理 需 
要 超过 2。 由 于 z-index 不 能 超过 2， 因 此 ， 我 称 其 为 “不 犯 二 ”准则 。 

这 是 一 条 经 验 准则 ， 可 以 有 效 降低 日 后 遇 到 z-index 样式 问题 的 风险 。 

先 讲 一 下 为 什么 需要 这 个 准则 。 

(1) 定位 元 素 一 旦 设置 了 z-index 值 ， 就 从 普通 定位 元 素 变 成 了 层 登 上 下 文 元 ， 相 互 
间 的 层 舍 顺序 就 发 生 了 根本 的 变化 ， 很 容易 出 现 设 置 了 巨大 的 z-inadex 值 也 无 法 和 履 盖 其 他 元 
系 的 问题 。 

(2) 避免 z-index“ 一 山 比 一 山高 ”的 样式 混乱 问题 。 此 问题 多 发 生 在 多 人 协作 以 及 后 期 
维护 的 时 候 。 例 如 ，A 小 图 标定 位 ， 习 惯性 写 了 个 z-index:9; B 一 看 ,自己 原来 的 实现 被 履 
羡 了 ， 立 马 写 了 个 z-index:99; 结果 比 弹 框 组 件 层级 还 高 ， 那 还 得 了 ， 立 马 阐 框 组 件 来 一 个 
z-index:999999; 谁 知 后 来 ， 弹 框 中 又 要 有 出 错 提示 效 末 …… 显 然 ， 最 后 项 目的 z-index 
层级 管理 就 是 一 团 糟 。 

如 有 果真 的 了 解 了 本 章 的 内 容 ， 你 就 会 发 现 ， 原 来 自己 的 代码 中 很 大 一 部 分 z-index 设置 
都 是 多 余 的 ， 不 仅 浪 费 代 码 ， 还 埋 下 样式 问题 风险 ， 尤 其 那 种 使 用 absolute 绝对 定位 必 使 用 
z-index 的 做 法 是 最 溃 蕊 的 。 

如 果 DOM 顺序 确实 无 法 调整 ， 不 得 不 使 用 z-index 值 ， 请 记 住 ，z-ingdex 不 要 超过 2， 
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不 是 不 能 ， 而 是 没有 必要 。 我 从 业 这 么 多 年 ， 迪 到 很 多 很 复业 的 与 定位 相关 的 交互 场景 ， 但 
z-index 最 多 止步 于 2。 如 条 你 的 定位 友 现 必须 z-index:3 或 者 以 上 才能 满足 效果 ， 建 议 你 
检查 目 己 的 代码 ， 试 试 应 用 “relative 的 最 小 化 原则 ”来 实现 ， 试 试 利用 元 素 原 生 的 层 登 顺 
序 进 行 层 级 控制 ， 等 等 。 

很 重要 的 一 点 ， 我 这 里 的 “不 犯 二 ” EN 并 不 包括 那些 在 页 面 上 球 来 际 去 的 元 素 定 位 ， 
弹 框 、 出 错 提 示 、 一 些 下 拉 效 果 等 都 不 受 这 一 准则 限制 。 

对 于 这 类 JavaScript 驱动 的 浮 层 组 件 ， 我 会 借助 “层级 计数 器 ”来 管理 ， 原 因 如 下 : 

(1) 总 会 遇 到 意 想 不 到 的 高 层级 元 素 ; 

(2) 组 件 的 狗 盐 规则 具有 动态 性 。 

所 谓 “ 层 级 计数 器 ” 实际 上 就 是 一 段 JavaScript 脚本 ， 会 遍历 所 有 <bodqy> 处 于 显示 状态 
的 子 元 素 ， 并 得 到 最 大 z-index 值 ， 和 默认 的 z-index 做 比较 。 如 果 超 出 ， 则 显示 的 组 件 的 
z-index 目 动 加 1， 这 样 就 不 会 出 现 有 组 件 被 其 他 组 件 履 盖 的 问题 ; 如 果 不 超 出 ， 融 使 用 默认 
的 z-index 值 ， 我 习惯 设 成 9， 因 为 遵循 “不 犯 二 ”准则 的 情况 下 ，9 已 经 是 个 足够 安全 的 值 
了 ， 浮 层 组 件 根本 无 须 担 心 会 被 页 面 上 某 个 元 素 层 级 履 羡 。 

此 刻 大 家 不 妨 想 想 目 己 的 项 目 ， 如 朱 所 有 的 浮 层 相关 的 组 件 容 硕 的 z-index 默认 值 是 9， 
会 不 会 出 现 样 式 问 题 。 如 果 觉 得 层级 太 低 不 敢 想 象 ， 则 说 明 你 的 项 目 层级 这 块 还 有 较 大 改进 的 
空间 。 

页 面 上 主体 元 系 遭 循 z-index“ 不 犯 二 ”准则 ， 浮 层 元 系 使 用 z-index“ 层 级 计数 絮 ”， 
双管齐下 ， 从 此 和 z-index 问题 说 拜拜 ! 
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时 势 造 英雄 。 在 我 上 学 那 会 儿 ， 网 络 市 宽 受 了 上限， 电脑 性 能 低下 ， 在 这 种 大 背景 下 ， 重 文字 内 容 的 
展示 是 比较 符合 现实 情况 的 ， 要 是 去 搞 个 直 揪 网站， 多半“ 卡巴 斯 基 【( 卡 吧 死 机 )” 所 以 在 那个 时 代 
背景 下 ， 什 么 技术 能 够 非常 方便 地 进行 文本 处 理 和 文本 展示 ， 那 这 个 技术 一 定 能 够 普及 和 兴盛 。 

CSS 就 是 凭借 自身 强大 的 文本 处 理 和 文本 展示 能 力 成 为 样式 布局 的 标杆 语言 的 。 同 时 代 的 
SVG 的 优势 在 于 图 形 展示 ， 它 在 文本 人 处理 这 一 块 实 在 是 不 敢 茶 维 。 比 方 说 简单 的 文字 边缘 目 动 
换行 ， 在 CSS 流 的 概念 里 几乎 可 以 说 是 天 生 的 、 理 所 当然 的 ， 但 在 SVG 里 面 ， 完 全 就 是 撞 了 
南 增 也 不 回头 啊 ! 必须 要 手动 点 拨 一 下 才 行 。 

当然 ， 随 着 现在 软 便 件 的 提升 ,人 们 对 互联 网 的 需求 已 经 不 仅仅 局 限于 简单 的 图 文 展 示 了 ， 
此 时 ，SVG 以 及 canvas 等 技术 开始 迎 来 自己 的 春天 。 

CSS 文本 处 理 能 力 之 所 以 强大 ， 一 方面 是 其 基础 概念 ， 例 如 块 级 盒 模 型 和 内 联 盒 模型 ， 束 
是 为 了 让 文本 可 以 如 文档 般 目 然 呈 现 ; 另 一 方面 是 有 非常 非常 多 与 文本 处 理 相 关 CSS 属性 的 文 
持 。 而 本 章 就 将 着 重 介绍 这 些 CSS 属性 一 些 可 能 不 为 人 知 的 地 方 。 
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第 5 章 介 绍 过 line-height 和 vertical-align 的 好 朋友 关系 , 实际 上 , font-size 
也 和 1ine-height 是 好 朋友 ， 同 样 也 无 处 不 在 ， 并 且 纸 面 上 1ine-neight 的 数值 属性 值 和 
百分比 值 属性 值 都 是 相对 于 font-size 计算 的 ， 其 关系 可 谓 不 言 而 喻 。 

现在 有 意思 了 ， 所 谓 朋 友 的 朋友 也 是 朋友 ， 那 font-size 和 vertical-align 是 不 是 
也 是 朋友 呢 ? 








8.1.1 font-size 和 vertical-align 的 隐秘 故事 


line-height 的 部 分 类 别 属 性 值 是 相对 于 font-size 计算 的 ，vertical-align 百 分 
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比值 属性 值 又 是 相对 于 line=hergnt 计算 的 , 于 是 , 看 上 去 八 寿 子 都 搭 不 上 边 的 vertical- 
align 和 font-size 属性 背后 其 实 也 有 有 着 关联 的 。 
例如 ， 下 面 的 CSS 代码 组 合 : 








P { 
font-size: 16px; 
line-height: 1.5;) 

} 

P > img { 
vertical-align: -20%; 


} 

此 时 ，p > img 选择 器 对 应 元 素 的 vertical-align 计算 值 应 该 是 : 
16px * 1.5 * -25% = -6px 

也 就 是 上 面 的 CSS 代码 等 同 于 : 


p { 
font-size: 16px; 
line-height: 1.5; 

| 

P > img { 
vertical-align: -6px; 


} 

但 是 两 者 义 有 所 不 同 , 很 显然 , -25% 是 一 个 相对 计算 属性 值 , 如 采 此 时 元 素 的 font-size 
发 生变 化 ， 则 图 乒 会 自动 进行 垂直 位 置 调整 。 我 们 可 以 看 一 个 无 论 font-size 如 何 变 化 、 后 
面 图 标 都 垂直 居中 对 齐 的 例子 ,手动 输入 http://demo.cssworld.cn/8/1-1.php 或 者 扫 下 面 的 二 维 码 。 
可 以 看 到 ， 无 论文 字 字 号 是 大 还 是 小 ， 后 面 的 图 标 都 非常 恨 好 地 垂直 居中 对 齐 ， 如 图 8-1 所 示 。 

















图 8-1 永远 垂 且 居中 对 齐 的 图 标示 意 





核心 CSS 代码 如 下 : 


p > img { 
width: 1l6px; height: 16px; 
vertical-align: 20%; 
Position: relative; 
top: 8px; 

} 


原理 如 下 : 内 联 元 系 默 认 基 线 对 齐 ， 图 上 请 的 基线 可 以 看 成 是 图 片 的 下 边缘 ， 文 字 内 容 的 基 
线 是 字符 x 下 边缘 ， 因 此 ， 本 例 中 ， 图 片 下 边缘 默认 和 “中 文 ” 两 个 汉字 字形 底 边 缘 往 上 一 点 
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的 位 置 对 齐 。 然 后 ， 我 们 通过 vertical-align:25gs 声 明 让 网 片 的 下 边缘 和 中 文 汉 字 的 中 心 


线 对 齐 。 此 时 ， 图 标 和 文字 的 状态 应 该 如 图 8-2 所 示 。 PE 
图 8-2 完全 就 是 实例 效果 注释 top: 8px 后 的 截图 标注 ， 没 有 


任何 加 工 。 看 上 去 似乎 上 面 小 ， 实 际 上 是 视觉 误差 ， 分 隔 线 上 下 完 ”图 8-2 图 片 下 边缘 和 文字 
全 和 告 ， 1 :人保 亲 小 产 。 中 心 线 对 齐 标注 示意 

由 于 我 们 这 里 的 图 标 是 固定 的 像素 尺寸 , 因此 , 通过 偏 移 自 喘 1/2 高 度 来 实现 真正 的 居中 ， 
可 以 使 用 CSS3 transform 人 位移， 我 这 里 为 了 兼容 性 ， 使 用 了 relative 相对 定位 。 

其 居中 原理 本 质 上 和 绝对 定位 元 又 50% 定 位 加 偏 移 自身 1/2 尺寸 实现 居中 是 一 样 的 , 只 不 
过 这 里 的 偏 移 使 用 的 是 vertical-align 百分比 值 。 

这 么 一 看 ，vertical-align 百分比 属性 值 似乎 还 是 有 点 用 的 ! 如 果 再 联想 到 
vertical-align:middle 实现 冬 直 居中 效果 经 常 不 尽 如 人 意 ， 说 不 定 还 能 找到 一 块 更 好 的 
宝 。 但 我 要 告诉 你 ， 其 实 还 有 更 好 的 实现 ， 那 束 是 使 用 单位 ex。 例 如 ， 将 前 面 例子 中 的 
vertical-align:25% 改 成 vertical-align:.6ex, 效果 基本 上 就是 一 样 的 ， 并且 还 多 了 
一 个 优点 ， 就 是 使 用 vertical-align:.6ex 实现 的 垂直 居中 效果 不 会 受 1ine-height 变 
化 影响 ， 而 使 用 vertical-align:25%，1line-height 一 旦 变化 ， 就 必须 改变 原来 的 
vertical-align 大 小 、 重 新 调整 垂直 位 置 ， 这 容错 性 明显 就 降 了 一 个 层次 。 

因此 ,虽然 例子 演示 的 是 vertLieadl=alLign 百分比 值 , 实际 上 是 推荐 使 用 与 font-size 
有 大 密切 天 系 的 ex 单位 。 

说 到 这 里 ， 妨 不 住 想 介绍 男 外 一 些 和 font-size 有 着 密切 的 关系 的 东西 。 


8.1.2 理解 font-size 与 ex、em 和 rem 的 关系 


ex 是 字符 x 高 度 ， 显 然 和 font-size 关系 密切 ，font-size 值 越 大 ， 目 然 ex 对 应 的 
大 小 也 就 大 ， 对 此 本 书 前 面 已 经 有 介绍 ， 这 里 不 乾 述 。 

下 面 来 看 看 单位 em。 如 果 说 ex 是 字符 x 高 度 ， 那 是 不 是 em 就 是 字符 m 的 高 度 ? 

我 的 回答 是 “不 是 的 ”% 但 是 em 和 字符 m 确实 有 关 。em 在 传统 排版 中 指 一 个 字模 的 高 度 
(可 以 脑 补 下 活字 印刷 的 字模 )， 注 意 是 字模 的 高 度 ， 不 是 字符 的 高 度 。 其 一 般 由 'M' 的 宽度 决 
定 〈 因 为 宽 高 相同 )， 所 以 叫 sm。 也 就 是 说 ， 之 所 以 叫 作 em 完全 取决 于 M 的 字形 ， 毕 葛 英 文 
26 个 字母 方 方 正 正 的 不 算 多 。 如 果 按 照 这 种 说 法 ， 那 方 方 正 正 的 汉字 岂 不 是 每 一 个 字 都 正好 一 
个 em? 没 错 ， 确 实 是 这 样 ， 尤 其 作为 印刷 体 的 宋体 效果 最 为 明显 ， 这 种 表现 在 CSS 中 也 有 非 
常 明显 的 体现 。 

例如 ， 浏 览 器 默认 font-size 大 小 是 16px， 假 设 一 个 <div> 宽 度 是 160px， 则 正好 可 
以 放下 10 个 汉字 不 换行 ， 如 果 是 159px 像素 ， 第 十 个 汉字 束 会 挥 下 来 ;如 果 再 同时 设置 
line-height:1 和 一 个 背景 色 ， 代 码 如 下 : 

div 1 


width: 160px; 
line-height: 工 ; 
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background-color: #eee; 


} 
我 们 束 会 发 现 中 文 汉字 的 尺寸 束 可 以 看 作 em 单位 的 代名词 , 尤其 在 局 度 。” 古 广 中 文中 文中 文中 妈 | 
这 一 块 ， 简 直 分 坚 不 兰 ， 如 图 8-3 所 示 。 8.3 汉字 尺寸 和 
也 就 是 次 ，em 就 是 "中 "等 汉字 的 高 度 ! 于 是 ， 我 们 对 em 的 理解 就 em 单位 关系 示意 
更 加 简单 了 ， 百 接 看 一 个 很 容易 理解 错误 的 题目 ， 在 Chrome 浏览 右 下 ，<h1> 元 素 有 如 下 的 款 
认 CSS: 




















hl { 
font-size: 2em; 
-webkit-margin-before: 0.67em; 
-webkit-margin-after: 0.67em; 


} 
那么 ， 假 设 页 面 没 有 任何 CSS 重 置 ， 根 元 素 font-size 了 束 是 默认 的 16px， 请 问 : 此 时 <h1> 
元 素 margin-before 的 像素 计算 值 是 多 少 ? 

如 果 对 em 了 解 不 够 ,很 容易 认为 lem 大 小 就 是 16px， 于 是 计算 值 是 16pxx0.67 =10.72px， 
实际 上 这 是 错误 的 。 

我 们 可 以 这 样 想 , 假设 <h1> 里 面 有 汉字 , 此 时 汉字 的 高 度 是 多 少 ? 这 个 高 度 就 是 此 时 lem 
大 小 。<h1> 元 素 此 时 font-size 是 2em， 算 一 下 就 是 32px， 因 此 ， 此 时 里 面 汉 字 的 高 度 应 
该 是 32px， 也 束 是 说 ， 此 时 <h1> 元 际 的 1em 应 该 是 32px， 于 是 margin-before 的 像 系 计 























算 值 为 32pxx0 .67 = 21.44px， 和 浏览 器 自己 的 计算 值 。 te a 
一 样 ， 如 图 8-4 所 示 。 emer er 
3 | YL 4 ~ 人 起 1 众 ，。 ' 。 四 
攻 看 ， 似乎 出 现 了 死 循 环 导论 : font-size:2enm, 图 8-4 Chrome 浏览 器 <h1> 
于 是 1em 变 成 32px， 那 此 时 的 2em 不 又 是 64px， 然 后 元 素 margin 计算 值 
ee 


正如 前 面 提 到 过 的 一 样 ，CSS 世界 的 泻 染 是 一 次 演 染 ， 是 不 会 有 死 循环 的 。 这 里 是 先 计 算 
font-size， 然 后 再 计算 给 其 他 使 用 em 单位 的 属性 值 大 小 。 

总 结 如 下 : 在 CSS 中 ，1lenm 的 计算 值 等 同 于 当前 元 素 所 在 的 font-size 计算 值 ， 可 以 将 
其 想象 成 当前 元 素 中 (如 果 有 ) 汉字 的 高 度 。 

所 有 相对 单位 的 好 处 都 是 一 样 的 ， 样 式 表 现 更 具有 弹性 。 例 如 ， 理 论 上 ， 有 一 个 布局 ， 项 
望 小 屏 时 整体 绚 小 ， 大 屏 时 再 弹性 扩大 ， 此 时 就 可 以 让 所 有 元 取 和 客 高 尺寸 等 都 使 用 em， 于 是 ， 
最 后 只 要 改变 布局 祖先 元 素 的 font-size 大 小 就 可 以 实现 整体 的 弹性 变化 。 

这 种 策略 很 棒 ， 也 确实 可 行 ， 但 是 有 一 个 比较 态 烦 的 事情 ， 它 和 上 面 <h1> 元 素 计 算 一 样 的 
厂 烦 ，enm 是 根据 当前 font-size 大 小 计算 的 ， 一旦 布局 中 出 现 标 题 这 种 跟 基 础 font-size 
大 小 不 一 样 的 场景 的 时 候 ， 标 题 里 面 所 有 元 素 em 都 要 重新 计算 一 过 ， 甚 为 肪 烦 ， 最 终 的 成 品 
维护 成 本 惑 比 较 局 了 。 

正 是 由 于 这 种 局 限 性 ， 另 外 一 个 和 font-size 密切 相关 的 单位 出 现 了 ， 就 是 rem， 妈 root 
em， 顾 名 思 义 ， 束 是 根 元 系 em 大 小 。em 相对 于 当前 元 孙 ，rem 相对 于 根 元 聚 ， 本 质 差 别 在 于 
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当前 元 素 是 多 变 的 ， 根 元 素 是 固定 的 ， 也 就 是 说 ， 如 果 使 用 rem， 我 们 的 计算 值 不 会 受 当 前 元 
又 font-size 大 小 的 有 影响， 假设 <n1> 的 默认 CSS 是 这 样 : 


hl { 
font-size: 2em; 





-webkit-margin-before: 0.67rem; 
-webkit-margin-after: 0.6/rem; 


} 
那么 2m 的 font-size 计算 值 会 被 忽略 ， 直 接 使 用 根 元 素 的 16px 进行 计算 ， 于 是 margin- 
before 计算 值 是 16 像素 X0.67 = 10.72 像素 。 

因此 ， 要 想 实 现 珊 有 缩放 性 质 的 弹性 布局 ， 使 用 rem 是 最 佳 策略 ， 但 rem 是 CSS3 单位 ， 
IE9 以 上 浏览 器 才 支 持 ， 需 要 注意 兼容 性 ， 我 这 里 就 不 再 多 介绍 了 。 

回 到 em 单位 。 em 实际 上 更 适用 于 图 文 内 容 展 示 的 场景 , 对 此 进行 弹性 布局 ,例如 , <h1> 一 
<h6> 以 及 <p> 等 与 文本 内 容 展 示 的 元 素 的 margin 都 是 用 em 作为 单位 ， 这 样 ， 当 用 户 把 浏览 
器 默认 字号 从 “中 ”设置 成 “大 ”或 改 成 “小 ”的 时 候 ， 上 下 间距 也 能 根据 字号 大 小 自动 调整 ， 
使 阅读 更 舒服 。 

再 举 个 适用 于 em 的 场景 ， 如 果 我 们 使 用 SVG 矢量 图 标 ， 建 议 设 置 SVG 宽 高 如 下 : 
































svg { 
width: lem; height: lem; 
} 


这 样 ， 无 论 图 标 是 个 大 号 文字 混在 一 起 还 是 和 小 号 文字 混在 一 起 ， 都 能 和 当前 文字 大 小 保持 一 
致 ， 既 省 时 又 省 力 。 


8.1.3 理解 font-size 的 关键 字 属 性 值 


font-size 文 持 长 度 值 ， 如 1em， 也 文 持 百分比 值 ， 如 100%。 这 两 点 想必 众所周知 ,但 
font-size 还 文 持 关 键 字 属性 值 这 一 点 怕 是 就 有 不 少 人 不 清楚 了 。 
font-size 的 关键 字 属 性 值 分 以 下 两 类 。 
(1) 相对 尺寸 关键 字 。 指 相对 于 当前 元 素 font-size 计算 ， 包括 : 
。 larger: 大 一 点 ， 是 <big> 元 素 的 默认 font-size 属性 值 。 
。 smaller: 小 一 点 ， 是 <small> 元 素 的 默认 font-size 属性 值 。 
(2) 绝对 尺寸 关键 字 。 与 当前 元 素 font-size 无 和 天， 仅 受 浏览 器 设置 的 字号 影响 。 注 意 
这 里 的 措辞 ， 是 “浏览 器 设置 ?， 而 非 “ 根 元 素 ”， 两 者 是 有 区 别 的。 
。 xx-large: 好 大 好 大 ， 和 <h1> 元 系 计 算 值 一 样 。 
。 x-large: 好 大 ， 和 <h2> 元 素 计 算 值 一 样 。 
。 large: 大 ， 和 <hn3> 元 素 计 算 值 近似 (“近似 ” 指 计算 值 偏 闫 在 1 像素 以 内 ， 下 同 )。 
。 medium: 不 上 不 下 ， 是 font-size 的 初始 值 ， 和 <h4> 元 素 计 算 值 一 样 。 为 了 解决 
大 家 可 能 有 的 疑问 ， 这 里 有 必要 多 说 几 句 。 如 果 font-size 默认 值 是 medium， 而 
medium 计算 值 仪 与 浏览 絮 设 置 有 关 ， 那 为 何 我 们 平时 元 素 font-size 总 是 受 环 境 
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影 啊 变 来 变 去 呢 ? 

这 完全 是 因为 font-size 属性 的 继承 性 ， 实 际 开发 的 时 候 ， 我 们 常常 会 对 <html> 
或 <bodqy> 重 置 font-size 大 小 ， 例 如 : 

Body 7 


font-size: 14px; 


} 


于 是 , 受 继承 性 影响 , 大 多 数 后 代 元 素 的 font-size 计算 值 也 变 成 了 14px, medium 
这 个 初始 值 受 继承 性 影响 而 被 宪 盖 了 。 
。 small: 小 ， 和 <n5> 元 系 计 算 值 近似 。 
。 x-small: 好 小 ， 和 <hn6> 元 素 计算 值 近似 。 
。 xx-small: 好 小 好 小 ， 无 对 应 的 HTML 元 又。 
其 中 ， 相 对 尺寸 天 键 字 larger 和 smaller 由 于 计算 的 系数 在 不 同 浏览 器 下 差异 很 大 ， 
此 实用 价值 有 限 ， 只 有 类 似 文档 页 、 帮 助 页 这 类 对 文字 尺寸 要 求 不 高 的 场合 才 有 用 ; 而 绝对 尺寸 
关键 字 的 实用 性 要 大 一 些 ， 而 且 在 某 些 场合 是 推荐 使 用 的 关键 字 属 性 值 ， 这 个 要 慢 慢 讲 。 
首先 ， 我 抛 出 一 个 简单 的 问题 : 下面 两 个 CSS 代码 有 什么 区 别 ? 
html 1 
font-size: 14px; 
} 
html 1 


font-size: 87 .5 各， 


} 


















































在 绝 大 多 数 场景 下 ， 两 者 没有 差别 ， 全 都 计算 为 ”PR 
14px， 但 是 如 果 用 户 对 浏览 器 的 字号 进行 了 调整 ， 例 | : se 了 | | 十 x 字体 . 
如 ， 把 默认 的 “中 ”设置 成 了 “大 ” 如 图 8-5 所 示 ( 截 人 
目 Chrome 浏 唤 右 )， 那 么 此 时 ，font-size:14px 计 网 er 
算 值 还 是 145x， 但 6nt= Size:87.55 的 计算 值 则 三 
大 了 一 圈 ， 于 是 差别 就 出 现 了 。 如 果 是 像素 单位 图 8-5 ”Chrome 浏览 器 设置 
font-size， 用 户 改变 浏览 器 的 默认 字号 后 ， 页 面 会 网 页 内 容 的 字号 为 大 


微 丝 不 动 ; 如 果 是 百分比 值 font-size， 则 字号 相应 放大 ， 这 就 涉及 用 户 体 验 和 可 访问 性 问 
证 了 。 

正常 情况 下 ，14 像素 的 文字 大 小 是 足够 的 ， 但 是 ， 如 果 是 高 度 近 视 的 用 户 ， 或 者 上 班 急 和 急 
位 忙 瑟 记 戴 眼镜 或 者 在 投影 仪 上 投影 网 页 内 容 ， 此 时 束 有 大 字号 浏览 网 页 的 需求 ， 如 果 使 用 
固定 的 像 取 单位 ， 显 然 对 这 些 使 用 场景 是 不 友好 的 。 

好 在 浏览 堪 还 提供 了 “网 页 缩放 ”功能 ， 但 是 此 功能 也 是 有 局 限 性 的 : 如果 网 页 是 定 宽 非 
响应 式 的 ， 则 网 页 放大 后 窗 体 以 外 的 内 容 束 看 不 到 了 ， 在 Chrome/Firefox 浏览 器 下 甚至 连 个 水 
平 深 动 条 都 没有 ， 说 不 定 重 要 信息 就 会 看 不 到 。 由 此 可 见 ， 我 们 是 不 能 轻易 忽视 浏览 器 字号 设 
置 功能 的 。 
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然而 ， 现 代 网 页 设计 得 很 精致 ， 要 想 网 页 布局 跟随 字体 内 容 缩放 实在 两 难 ， 要 么 使 用 em， 
但 em 计算 与 当前 font-size 艳 合 ， 不 好 维护 ; 要么 使 用 rem, 但 下 8 不 文 持 ， 蝎 面 姗 使 用 利 
傣 。 因 此 ， 现 实 的 压迫 导致 我 们 只 能 使 用 px 进行 布局 ， 尤 其 梨 面 端 网 页 。 
如 何 权 衡 “ 易 于 实现 维护 ”“ 视 觉 还 原 ”“ 可 访问 性 ”这 三 者 ， 我 这 里 有 两 个 珍藏 的 建议 。 
(1) 即使 是 定 宽 的 传统 果 面 疹 网 页 ， 也 需要 做 啊 应 式 处理 ， 尤 其 是 针对 1200 像 系 宽度 设 
计 的 网 页 ， 但 只 需要 啊 应 到 800 像素 即 可 ， 可 以 保证 至 少 有 1.5 倍 的 纵 放 空间 ， 如 采 做 到 这 一 
步 ， 那 么 是 否 需 要 啊 应 浏览 器 的 字号 设置 这 一 点 就 可 以 忽略 。 
(2) 如 果 困 各 种 原因 无 法 做 啊 应 式 处 理 ， 也 没有 必要 全 局 都 使 用 相对 单位 ， 毕 竟 成 本 等 现 
实 问题 摆 在 那里 ， 其 实 只 需要 在 网 文 内 容 为 主 的 重要 局 部 区 域 使 用 可 缩放 的 font-size 处 理 
即 可 。 例 如 ， 小 说 网 站 的 阅读 页 、 微 信 公 众 号 文章 展示 区 、 私 信 对 话 内 容 区 、 搜 索引 擎 的 落地 
页 、 评 论 区 等 ， 都 强烈 建议 据 痉 px 早 位 ， 而 采用 下 面 的 实践 此 上 略 。 
。 容器 设置 font-size:medium， 此 时 ， 这 个 局 部 展示 区 域 的 字号 就 跟着 浏览 器 的 设 
置 走 了 ， 默 认 计 算 值 是 16px。 
。 容 右 内 的 文字 字号 全 部 使 用 相对 单位 ， 如 百分比 值 或 者 em 都 可 以 , 然后 基于 16px 进 
行 转换 。 例 如 : 


.article { 
























































font-size: medium; 
} 
.article hil { 
font-size: 2em; 
margin: .875em 0; 
} 
.article p { 
font-size: 87.5%; /* 默认 字号 下 计算 值 是 14px */ 
margin: lem 0; 


} 


同时 使 用 目 适 应 流体 布局 ， 间 距 什 么 的 也 使 用 相对 单位 ， 例 如 上 面 margin 使 用 的 是 
em 单位 。 于 是 ， 当 用 户 改变 了 浏览 露 的 字号 后 ， 整 个 阅读 区 域 的 所 有 字样 其 全 布局 都 
会 跟着 放大 ， 文 字 一 下 子 束 看 清楚 了。 这 种 局 部 处 理 的 好 处 在 于 ， 页 面 的 导航 、 侧 边 
栏 这 些 不 需要 长 时 间 阅 读 的 模块 还 是 原来 的 像素 布局 ,还 是 那么 精致 ， 丝 晕 不 受 影 啊 。 
就 这 么 很 微小 的 变动 ， 就 可 以 让 你 的 网 页 在 可 访问 性 这 一 块 超越 大 多 数 的 网 站 ， 何 乐 
而 不 为 ? 

可 以 看 到 ， 绝 对 尺寸 天 键 字 在 实际 项 目 中 还 有 很 有 价值 的 ， 但 有 价值 的 仅仅 是 medium， 

至 于 其 他 关键 字 ， 作 用 仅 限 于 字面 上 的 那 点 儿 ， 大 家 了 解 一 下 即 可 。 


8.1.4 font-size:0 与 文本 的 隐 减 


昌 面 Chrome 浏览 器 下 有 个 12px 的 字号 限制 ， 就 是 文字 的 font-size 计算 值 不 能 小 于 
12px, 我 猪 是 因为 中 文 ， 如 宋体， 要 是 小 于 12px， 就 会 挤 成 成 一 团 ， 略 丑 ，Chrome 看 不 下 去 ， 
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就 直接 禁用 了 了 。 
正 是 这 种 限制 导致 我 们 在 使 用 em 或 rem 进行 布局 的 时 候 ， 不 能 这 么 处 理 : 
html 1 


font-size: 62.5%» 


} 
理论 上 ， 此 时 根 字 号 计算 值 是 16px*0.625=10px， 于 是 ，width:14px 可 以 写成 
width:1.4em， 省 了 很 多 计算 的 贱 烦 。 但 是 ， 在 Chrome 下 ， 由 于 12px 的 限制 ， 根 字号 计算 
值 实际 不 是 10px， 而 是 12px， 所 以 ， 可 以 试 试 处 理 成 这 样 : 
html 1{ 


font-size: 625%; 


4 

此 时 根 字 号 计算 值 是 100px， 既 计算 无 忧 ， 叉 没有 12px 的 最 小 字号 限制 。 

但 是 我 个 人 建议 还 是 不 要 这 样 处 理 ， 尤 其 使 用 em 的 时 候 ， 因 为 font-size 属性 和 
line-height 属性 一 样 ,由 于 继承 性 的 存在 ,会 影响 贯 罕 整个 网 页 ,100px 的 环境 font-size 
一 定 会 将 平时 不 显 山 露水 的 辰 按 对 齐 问 题 、 间 隐 问 题 等 放大 ， 导 致 出 现 一 些 明 显 的 样式 问题 ， 
如 果 对 CSS 了 解 不 是 很 深刻 ， 怕 是 很 难 明白 为 什么 会 及 生 这 样 的 问题 。 同 时 这 样 做 也 限制 了 
px 等 其 他 单位 的 使 用 ， 有 时 候 是 比较 要 命 的 。 

因此 ,我 的 建议 是 仍 基于 浏览 器 默认 的 字号 进行 相对 计算 ,也 就 是 medium 对 应 的 16px， 
16 这 个 数字 是 一 定 可 以 整除 的 ， 因 此 计算 成 本 还 行 ， 或 者 使 用 Sass 或 Less 之 类 的 工具 辅助 
计 和 。 

还 是 回 到 字号 限制 的 问题 。 实 际 上 , 并 不 是 所 有 小 于 12px 的 font-size 都 会 被 当 作 12px 
处 理 ， 有 一 个 值 例外 ， 那 就 是 0， 也 束 是 说 ， 如 果 font-size:0 的 字号 表现 就 是 0， 那么 文 
字 会 直接 被 隐藏 掉 ， 并 且 只 能 是 font-size:0， 哪 怕 设 置 成 font-size:0.0000001px,， 
都 还 是 会 被 当 作 12px 处 理 的 。 

因此 ， 如 果 和 硕 望 隐藏 1ogo 对 应 元 系 内 的 文字 ， 除 了 text-indent 缩 进 隐藏 外 ， 还 可 以 
试 试 下 面 这 种 方法 : 


.logo { 





























font-size: 0;，; 


} 


8.2 ”字体 属性 冢 族 的 大 冢 长 font -family 


CSS 世界 中 的 有 很 多 属性 都 是 以 font- 开 头 的 , 如 font-style、font-weight 和 这 里 
要 介绍 的 font-family， 我 把 所 有 这 些 以 font- 开 头 的 CSS 属性 统称 为 “字体 属性 家 族 ”。 
就 最 终 的 深度 、 广 度 和 应 用 程度 来 看 ，font-family 有 点 儿 神 似 “ 字 体 属性 家 族 ” 的 大 家 长 ， 
其 实 从 其 名 字 上 就 能 看 出 点 味道 来 ， 顾 名 思 义 ，font-family 就 是 “字体 家 族 ” 的 意思 。 

font-family 默认 值 由 操作 系统 和 浏览 器 共同 决定 , 例如 Windows 和 0OSX 下 的 Chrome 
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默认 字体 不 一 样 ， 同 一 台 Windows 系统 的 Chrome 和 Firefox 浏览 右 默 认 字 体 也 不 一 样 。 
font-family 文 持 两 类 属性 值 ， 一 类 是 “字体 名 ”， 一 类 是 “字体 族 ”。“ 字 体 名 ”很 好 理 
束 是 使 用 的 对 应 字体 的 名 称 。 例 如 : 

bogdy { 


font-family: simsun; 


} 
就 表示 使 用 的 是 “宋体 ”。 如 采 字 体 名 包 合 空格 ， 需 要 使 用 引号 包 起 来 。 例 如 : 


body { 
font-family: 'Microsoft Yahei'; 


} 
根据 我 的 实践 ， 可 以 不 用 区 分 大 小 写 。 如 果 有 多 个 字体 设 定 ， 从 左 往 右 依次 寻找 本 地 十 售 有 对 
应 的 字体 即 可 。 例 如 : 


body { 
font-family: ‘PingFang SC', ‘Microsoft Yahel ' ， 
} 


就 是 先 寻找 是 否 本 地 有 PingFang SC 字体 ;， 如 果 没 有 ， 则 继续 寻找 本 地 是 否 有 Microsoft Yahei 
字体 ， 如 果 都 没 找到 ， 束 使 用 默认 值 。 
但 是 ,“ 字 体 族 ”分 为 很 多 类 ，MDN 上 文档 分 类 如 下 : 








= 
-td 




















font-family: serif; 
t-family: sans-serif; 
font-family: monospace; 


t-family: cursive; 


font-family: fantasy; 














+ 


font-family: system-ui; 

具体 合 义 解释 如 下 。 

e。 serif: 衬 线 字 体 。 

。 sans-serif: 无 衬 线 字 体 。 

。 monospace: 等 宽 字 体 。 

e。 cursive: 手写 字体 。 

e。 fantasy: 奇 约 字体 。 

e。 system-ui: 系统 UI 字 体 。 

对 于 中 文 网 站 ，cursive 和 fantasy 应 用 场景 有 限 ， 因 此 这 里 不 予 探讨 ， 这 里 痢 重 介绍 
一 下 衬 线 字 体 、 无 衬 线 字体 和 等 宽 字 体 。 


8.2.1 了 解 讨 线 字体 和 无 讨 线 字体 


字体 分 衬 线 字体 和 无 衬 线 字体 。 所 谓 裤 线 字 体 ， 通 俗 讲 束 是 笔画 开始 、 结 束 的 地 方 有 和 额外 
装饰 而 且 笔画 的 粗细 会 有 所 不 同 的 字体 。 网 页 中 和 用 中 文 衬 线 字 体 是 “宋体 ”， 秆 用 英文 村 线 字 
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体 有 Times New Roman、Georgia 等 。 无 衬 线 字 体 没 有 这 些 额 外 的 装饰 , 而 且 笔 画 的 粗细 差不多 ， 
如 中 文 的 “ 雅 黑 ”字体 ， 英 文 包 括 Arial、Verdana、Tahoma、Helivetica、Caljibri 等 。 








以 前 人 们 排 正文 豆 欢 使 用 衬 线 字体 ， 但 是 如 今 ， 不 知 是 审美 疲 务 还 是 人 们 更 加 妃 求 简洁 干 


津 的 缘故 ， 更 豆 欢 使 用 无 衬 线 字体 ， 如 “做 软 雅 黑 ”或 者 “ 鞋 方 ”之 类 有 的 字体 。 





在 CSS 世界 中 ， 字 体 是 有 对 应 的 属性 值 的 ， 如 下 : 


font-family: serif; /* 衬 线 字体 */ 
font-family: sans-serif; /* 无 衬 线 字体 */ 


我 们 在 移动 并 Web 开发 的 时 候 ， 虽 然 设 备 的 默认 中 文字 体 不 一 样 ， 但 都 是 无 衬 线 ， 都 挺 好 





看 的 ， 因 此 可 以 直接 使 用 下 面 的 CSS 代码 : 


body { 
font-family: sans-serif,; 


} 








没有 必要 特别 指定 中 文字 体 ， 人 否则 说 不 定 会 画蛇添足 。 


serif 和 sans-serif 还 可 以 和 具体 的 字体 名 称 写 在 一 起 ， 例 如 ; 


body { 
font-family: "Microsoft Yahei", sans-serif; 


} 


但 是 需要 注意 的 是 ，serif 和 sans-serif 一 定 要 写 在 最 后 ， 因 为 在 大 多 数 浏览 器 下 ， 





写 在 serif 和 sans-serif 后 面 的 所 有 字体 都 会 被 忽略 。 例 如 : 


body { 
font-family: sans-serif, "Microsoft Yahei"; 


} 


在 Chrome 浏览 器 下 ， 后 面 的 Microsoft Yahei 字体 是 不 会 被 演 染 的 。 据 我 的 推测 ， 有 可 能 浏览 
器 认为 当前 “字体 族 ” 已 经 满足 了 文本 演 染 的 需要 ， 没 必要 再 往 后 解析 了 。 


8.2.2 ”等 宽 字 体 的 实践 价值 


每 个 





所 谓 等 沉 字体， 一 般 是 针对 严 文 字体 而 言 的 。 据 我 所 知 ， 东 亚 字 体 应 该 都 是 等 党 的 ， 就 是 





字符 在 同等 font-size 下 占据 的 宽度 是 一 样 的 。 但 是 英文 字体 吏 不 一 定 了 ， 我 随便 写 一 











个 单词 ， 束 iMac 吧 ， 大 家 很 明显 地 发 现 这 个 字符 i 要 比 M 占据 的 宽度 小 。 如 有 果 这 样 看 着 还 不 
够 清楚 ， 那 我 换 一 种 呈现 方式 ， 上 下 两 行 ， 上 一 行 6 个 i， 下 一 行 6 个 M， 如 下 : 


l11111 

MMMMMM 

实际 的 两 行文 本 的 宽度 可 能 束 如 图 8-6 所 示 这 般 差 寞 明显 。 

但 是 ， 如 打 是 等 锅 字 体 〈 可 以 让 英文 字符 同等 宽度 显示 的 字体 束 称 为 “等 宽 字 体 ”)， 如 











Consolas、Monaco、monospace， 则 宽度 表现 残 不 一 样 了 ， 如 疼 8-7 所 示 。 
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HNNl i11111 
MMMMMM MMRMIMMM 
8-6“ 非 等 宽 字 体 效 末 图 8-7 等 宽 字 体 下 的 效果 


等 宽 字 体 在 Web 中 有 什么 用 呢 ? 

1. 等 宽 字 体 与 代码 呈现 

首先 等 宽 字 体 利 于 代码 呈现 。 对 于 写 代 码 的 人 来 说 ， 无 论 是 什么 语言 ， 易 读 是 第 一 位 ， 使 
用 等 宽 字 体 ， 我 们 阅读 起 来 会 更 轻松 舒服 。 因 ”边框 类 型 : <select class="monospaced"> 








<option value="solid” selected> 一 一 一 一 </ Optton> 
lL 一 般 编 辑 右 使 用 的 字体 或 者 Web 上 需要 呈 <option value="dashed">-------< </option> 
现 源 代码 的 字体 都 是 等 宽 字 体 。 例 如 ， 即 将 出 /pmo 





现 的 演示 页 面 的 源 代码 如 图 8-8 所 示 。 
2. 等 宽 字体 与 图 形 呈 现 案 例 一 则 
假设 某 工 具有 这 么 一 个 功能 : 通过 下 拉 选 
择 ， 可 以 改变 元 素 的 边框 样式 ， 也 就 是 borderStvyle 在 soliq/dqashed/dotted 间 切 换 。 
大 家 都 知道 ， 原 生 的 <select> 的 <option> 元 素 的 innerHTML 只 能 是 纯 text 字符 ， 不 
能 有 htm1， 也 不 支持 伪 元 素 ， 因 此 ， 要 模拟 solid、dashed 和 dotted， 只 能 使 用 字符 ， 而 
字符 有 长 有 短 ， 可 以 模拟 成 像样 的 规整 的 图 形 吗 ? 
可 以 的 ， 试 试 使 用 等 宽 字 体 。 手 动 输入 http://demo.cssworld.cn/8/2-1.php 或 者 扫 下 面 的 二 维 码 。 
最 终 效果 如 图 8-9 所 示 。 


<div id="border”" class="border"></d1iVv> 


图 8-8 东 源 代码 展示 万 段 











边框 类 型 : 





图 8-9 等 宽 字 体 模 拟 边 框 类 型 示意 


3. ch 单位 与 等 宽 字 体 布局 

ch 和 em、rem、ex 一 样 ， 是 CSS 中 和 字符 相关 的 相对 单位 。 和 ch 相关 的 字符 是 0， 没 
音 ， 丈 是 阿拉 人 数字 0。1ch 表示 一 个 0 字符 的 宽度 ， 所 以 6 个 0 所 占据 的 宽度 束 是 6ch。 

但 是 我 们 网 页 内 容 的 字符 不 可 能 都 是 0， 所 以 这 个 单位 乍 看 束 显 得 很 鸡肋 。 但 是 ， 如 采 和 
等 宽 字 体 在 一 起 使 用 ， 它 残 可 以 发 挥 不 一 样 的 威力 。 

由 于 ch 是 个 CSS3 单位 ， 且 IE9 浏览 器 的 宽度 和 其 他 浏览 器 明显 不 一 样 ， 因 此 此 处 不 展 
开 ， 但 可 以 提 一 提 一 些 不 错 的 应 用 场景 。 例 如 ， 有 些 输入 框 是 输入 手机 号 的 ， 在 中 国 ， 手 机 
号 是 11 位 ， 因 此 我 们 可 以 设置 该 输入 框 宽度 为 11cnh， 同 时 让 字体 等 宽 ， 则 用 户 一 眼 残 能 
出 自己 是 否 少 输入 或 者 多 输入 了 1 位 数字 。 又 如 ， 我 们 想 实 现 一 个 屏幕 上 代码 一 个 一 个 出 现 
的 动 效 ， 如 果 代 码 是 等 宽 字 体 ， 此 时 使 用 ch 单位 来 控制 宽度 ， 配 合 overflow 属性 和 CSS 
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animation 了 吏 能 在 完全 不 使 用 JavaScript 的 情况 下 将 此 效果 模拟 出 来 





应 用 场景 ， 不 一 一 说 明 。 


8.2.3 ”中 文字 体 和 丑 文 名 称 


虽然 一 些 常 见 中 文字 体 ， 如 宋体 、 微 软 雅 黑 等 ， 直 
接 使 用 中 文 名 称 作 为 CSS font-family 的 属性 值 也 能 
生效 ,但 我 们 一 般 都 不 使 用 中 文 名 称 , 而 是 使 用 英文 名 称 ， 
主要 是 为 了 规避 乱码 的 风险 .还 有 一 些 中 文字 体 直接 使 用 
中 文 名 称 作 为 CSS font-family 的 属性 值 是 没有 效果 
的 ， 如 思源 黑体 、 兰 孚 黑体 等 ， 需 要 使 用 字体 对 应 的 英文 
名 称 才 可 以 生效 。 

忌 而 言 之 一 句 话 ， 要 想 使 用 中 文人 字体， 就 必须 要 知道 
其 对 应 的 英文 名 称 。 下 面 就 是 我 整理 的 一 些 常 见 中 文字 体 
对 应 的 font-family 类 文 属性 名 称 。 

(1) Windows 常见 内 置 中 文字 体 和 对 应 瑞 文 名 称 见 
图 8-10。 

(2) OS X 系统 内 置 中 文字 体 和 对 应 英文 名 称 见 
图 8-11。 




















字体 英文 名 冬青 黑体 简 


PingFang SC ED 
和 三 党 畸 - 简 
SsTHeiti 

翩翩 体 - 客 
STKaiti 

手札 体 - 简 
STSong 

宋体 - 简 
STFangsong 

诗 娃 体 - 们 
STZhongsong 


Tiepe 魏 碑 - 简 


STXinwei 行 楼 -前 


STLiti 雅 桨 - 简 


STXinghai 圆 体 - 简 


字体 中 文 名 


微软 正 黑体 


图 8-10 


， 当然， 还 有 其 他 一 些 


字体 英文 名 

SimSun 

SimHei 

Microsoft Yahei 
Microsoft JhengHel 
Kaili 

NSimSun 


FangSong 





Windows 中 和 常见 内 置 中 文 





字体 和 对 应 英文 名 称 


Hiragino Sans GB 


Lantinghei SC 


fanzipen SC 


Hannotate SC 


Songti SC 


WwWawati SC 


Weibei SC 


Mengiac SE 


Yapi sC 


Yuanti $C 











8-11 


OS 义 和 常见 内 置 中 文字 体 和 对 应 英文 名 称 
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(3) Office 软件 安 冯 新 增 中 文字 体 和 对 应 英文 名 称 见 图 8-12。 
(4) 其 他 一 些 中 文字 体 和 对 应 英文 名 称 见 图 8-13。 


字体 中 文 名 字体 英文 名 


幻 加 YouYuan 

求 书 LiSu 

华文 细 黑 STXihei 

华文 楷体 STKaiti 

华文 宋体 STSong 

华文 仿 宁 STFangsong 

华文 中 宋 STZhongsong 

AVS SGaeimna 

华文 琉 珀 STHupo 

华文 新 魏 STXinwei 

三 文 悦 书 IC 证 字体 中 文 名 字体 英文 名 

华文 行 皖 STHinghae 志 源 黑体 Source Han Sans CN 
方正 铬 体 FZShuTi 思源 宋体 Source Han Serif SC 
方正 姚 体 FZYaoti 文 录 经 微米 里 ”WenQuanyYi Micro Hei 








8-12 Office 安装 新 增 中 文字 体 和 对 应 英文 名 称 图 8-13 ”其 他 一 些 中 文字 体 和 对 应 英文 名 称 


8.2.4 ”一些 补充 说 明 


微软 正 黑体 是 一 球 全 面 文 持 ClearType 技术 的 TrueType 无 讨 线 字体 , 用 于 繁体 中 文系 
统 。 相 对 应 地 ， 中 国 大 陆地 区 用 的 是 微软 雅 黑 。 对 于 微软 雅 黑 和 微软 正 黑 ， 不 好 简单 地 用 
简体 或 者 繁体 来 区 分 ， 因 为 这 两 套 字 体 都 同时 包含 了 比较 完整 的 简体 和 繁体 汉字 ， 以 确保 
在 简体 和 繁体 混 排 的 页 面 上 能 够 完美 地 显示 。 但 由 于 中 国 大 陆 和 中 国 港 、 澳 、 台 地 区 在 各 
目的 文字 规范 中 对 汉字 的 写法 规定 有 很 多 细节 上 的 不 同 , 所 以 这 两 套 字 形 在 正式 场合 古 不 
能 混 消 使 用 的 。 

我 们 平 利 所 说 的 “宋体 ”， 指 的 都 是 “中 易 宋 体 ” 喘 文 名 称 SimSun,“ 黑 体 ” 类 似 的 是 “中 
易 黑 体 ”。 在 OS X 第 见 内 置 中 文字 体 中 我 多 列 了 一 个 “宋体 - 简 ”， 需 要 注意 的 是 ， 这 个 “宋体 - 
简 ” 和 我 们 平 党 所 说 的 “宋体 ”并 不 古 同 一 个 字体 ， 其 瑞 文 名 称 是 “Songti SC”， 字 形 表现 也 有 


过 弄 ， 要 注音 典 别 。 
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在 OS X 也 就 是 苹果 操作 系统 的 字体 名 称 中 经 常会 出 现 “SC”， 这 个 “SC” 指 的 是 “简体 ” 
(simplified chinese) 的 意思 ， 相 对 应 的 还 有 “TC”， 指 的 是 “楷体 ”(traditional chinese) 的 意思 。 

Windows 系统 本 身 默 认 的 中 文字 体 并 不 多 ， 和 OS X 操作 系统 相 比 逊色 很 多 ,尤其 是 OS X 
操作 系统 中 的 “ 届 恶 体 ”“ 手 札 体 ” 等 几 个 手写 体 束 非常 棒 ! 但 是 好 在 Windows 操作 系统 安装 
Office 的 比例 相当 高 ， 因 此 如 采 不 是 要 求 非 常 严 格 的 话 ， 我 们 还 是 可 以 使 用 很 多 中 文字 体 的 ， 
如 “华文 行 楷 ”“ 华文 新 魏 ”“ 华 文 隶书 ”等 华文 字体 。 其 中 ,“ 华 文 黑 体 ” 和 “华文 细 黑 ”有 一 
段 故 事 : OS X 10.6 版 本 之 前 ,“ 华 文 黑体 ”由 “华文 细 黑 ”(STXihei) 和 “华文 黑体 ”(STHeiti) 
这 两 个 字 重 组 成 , 但 OS X 10.6 之 后 “华文 黑体 ”重组 ， 就 没有 “华文 细 黑 ”这 么 一 说 了 。 因 此， 
我 把 “华文 细 黑 ” 归 在 了 Office 安装 字体 一 类 ， 而 将 “华文 黑体 ” 归 在 OS X 之 中 。 根 据 我 的 
测试 , 这 两 个 字体 并 不 能 随意 互通 有 无 , 而 且 似 乎 还 与 浏览 器 有 关系 : OS X 系统 下 ,似乎 Safari 
能 够 问 下 兼容 “华文 细 黑 ” Chrome 却 不 可 以 ; 反 过 来 ，Windows 系统 下 ， 无 法 识别 “华文 黑 
体 ”(STHeiti)。 又 或 者 是 使 用 “ 圆 体 ” Windows 系统 下 有 个 “ 幼 圆 ”OSX 下 有 个 “ 圆 体 - 简 六 
都 是 统一 风格 的 字体 ， 也 是 可 以 在 实际 项 目 中 答 试 使 用 的 。 

所 有 英文 名 称 大 小 与 都 经 过 一 定 的 考量 ， 并 不 是 随便 设 定 的 ， 虽 然 说 CSS font-family 
对 名 称 的 大 小 写 不 怎么 敏感 ， 但 是 根据 我 的 经验 ， 最 好 至 少 首 字母 要 大 写 ， 人 否则 在 使 用 CSS 
unicode-range 的 时 候 可 能 会 遇 到 一 些 矿 烦 。 

“思源 黑体 ”和 “思源 宋体 ”是 Adobe 与 Google 合作 推出 的 开源 字体 。 其 设计 目标 是 可 以 
广泛 用 于 多 种 用 途 的 计算 机 字体 ， 比 如 用 于 手机 、 平 板 或 者 果 面 的 用 户 界 面 、 网 页 浏览 或 者 电 
子 书 阅 读 每 , 均 包 含 7 个 字 重 。 因 为 思源 黑体 和 思源 宋体 字体 集成 到 Google 的 泛 Unicode 字体 
系列 ( 称 为 Noto) 中 ,所 以 不 少 网 站 及 资料 会 显示 “思源 黑体 ”英文 名 称 是 “Noto Sans CJK SC ”， 
这 是 Google 的 称呼 。 然 而 ， 根 据 我 的 测试 ， 这 种 英文 名 称 在 Windows 和 OS X 系统 下 都 是 无 效 
的 ，Adobe 的 名 称 “Source Han Sans CN” 可 以 正常 显示 。 

“ 文 果 驿 微 米 黑 ” 是 Google Droid 的 开源 衍生 字体 。Droid 字体 系 是 Google 包含 在 著名 的 
开源 手机 平台 Android 系统 中 的 默认 字体 , 其 中 的 Droid Sans Fallback 包含 CJK 标准 汉字 16000 
余 个 , 是 目前 所 知 为 数 不 多 的 开源 中 文字 体 之 一 (也 是 继 文 果 驿 正 黑 之 后 第 二 个 开源 中 文 黑体 )。 
由 于 该 字体 的 设计 目标 是 手机 等 租 入 式 设 备 ， 与 其 他 常见 中 文字 体 比较 ， 其 一 个 显著 的 优点 古 
文件 极为 精简 ， 只 有 不 到 3 MB。 

本 节目 前 所 展示 的 或 是 系统 字体 , 或 是 开源 字体 ， 如果 希望 知道 一 些 震 要 付费 购买 的 版 权 字 体 
的 英文 名 称 ， 如 某 些 汉 仪 字体 或 者 方正 字体 ， 可 以 参见 我 的 博客 文章 : http://www.zhangxinxu.com/ 
wordpress/2p=5474。 


8.3 字体 家 族 其 他 成 员 










































































8.3.1 貌似 粗 久 、 实 则 精细 无 比 的 font-weight 


font-weight 表示 “ 字 重 ”， 通 俗 点 讲 ， 融 是 表示 文字 的 粗细 程度 。 
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对 于 font-weight 这 个 属性 ,我们 平时 使 用 者 相当 粗 六 ， 无 非 残 是 下 面 这 两 个 CSS 声明 : 


font-weight: normal; 
font-weight: bold; 


以 至 于 很 多 人 就 误 认 为 font-weignt 的 作用 就 是 让 文字 加 粗 或 者 正常 , 但 实际 上 ,font- 
weignt 这 个 属性 可 谓 “ 张 飞 军 针 ” 一 一 粗 中 有 细 ， 而 且 是 精细 无 比 ! 

首先 让 我 们 大 致 了 解 一 下 font-weignt 都 支持 哪些 属性 值 。 具 体 如 下 : 

/* 平常 用 的 最 多 的 */ 


font-weight: normal; 
font-weight: bold; 














/* 相对 于 父 级 元 素 */ 
font-weight: lighter; 
font-weight: bolder; 


/* 字 重 的 精细 控制 */ 

font-weight: 100; 

font-weight: 200; 

font-weight: 300; 

font-weight: 400; 

font-weight: 5007 

font-weight: 600; 

font-weight: 700; 

font-weight: 800; 

font-weight: 900; 

可 以 看 到 ， FOnNtswersght 支持 十 多 个 属性 值 ，normal 和 bold 这 两 个 关键 字 仪 仪 是 众 
多 属性 值 的 冰山 一 角 。 

所 有 这 些 属性 值 ， 都 可 以 从 font-weight:100 至 font-weight:900 说 起 。 

。 100: 文字 很 细 ， 细 如 发 丝 。 

。 200: 文字 很 轻 ， 轻 如 鸿毛 。 

。 300: 文字 较 轻 ， 轻 如 飞 燕 。 

。 400: 文字 正常 ， 等 同 normal。 

。 500: 文字 不 粗 不 细 ， 不 轻 不 重 。 

。 600: 文字 略 粗 ， 粗 如 小 腿 。 

。 700: 文字 加 粗 ， 等 同 bold。 

。 800: 文字 超 粗 ， 粗 如 大 腿 。 

。 900: 文字 很 重 ， 重 如 泰山 。 

有 人 可 能 会 有 疑问 : 我 是 不 是 可 以 自 创 一 个 font-weight:550 的 写法 ? 答案 是 : 不 可 
以 。 如 果 使 用 数值 作为 font-weight 属性 值 ， 必 须 是 100 一 900 的 整 百 数 。 因 为 这 里 的 数值 
仅仅 是 外 表 长 得 像 数 值 ， 实 际 上 是 一 个 具有 特定 含义 的 关键 字 ， 并 且 这 里 的 数值 关键 字 和 字母 
天 键 字 之 则 是 有 对 应 关系 的 ， 例 如 ，font-weight:400 实际 上 等 同 于 font-weight: 
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normal，font-weight:700 等 同 于 font-weight:bold。 因 此 ， 如 果 我 们 希望 让 某 些 文 
字 的 粗细 变 得 正常 ， 也 可 以 使 用 font-weight:400, 与 使 用 normal 相 比 少 了 3 个 字母 ; 同 
样 ， 如 果 和 希望 文字 加 粗 ， 也 可 以 使 用 font-weight:700， 与 使 用 bolq 相 比 少 了 1 个 字母 。 

因此 , 很 显然 , 400 和 700 是 文字 粗细 与 否 的 重要 临界 点 , 加 上 最 小 的 100 和 最 大 的 900， 
残 构成 了 font-weight 完整 的 字 重 临界 点 。 知 道 这 个 有 什么 意义 呢 ?” 意 义 就 在 于 ，1lighter 
和 bolder 这 两 个 具有 相对 特定 的 关键 字 就 是 基于 这 4 个 临界 点 进行 解析 和 洽 染 的 。 

这 里 有 必要 再 强调 一 下 ，1lighter 和 polder 是 基于 临界 点 进行 解析 的 ， 千 万 不 要 想 当 
然 地 认为 是 根据 当前 字 重 上 下 100 加 加 减 减 后 的 效果 。 例如 ， 先 font-weight:100, 然后 再 
font-weight:bolder 后 的 font-weight 计算 大 小 是 400， 而 不 是 100。 完 整 解析 关系 参 
见 表 8-1。 

















表 8-1 lighter 和 bolder 解析 规则 表 


100 400 100 
200 400 100 
300 400 100 





下 面 关 键 问题 来 了 ,很 多 人 会 发 现 , font-weight 无 论 是 设置 300、400、500 还 是 600， 
文字 的 粗细 都 没有 任何 变化 ， 只 有 到 700 的 时 候 才 会 加 粗 一 下 ， 感 觉 浏览 器 好 像 不 文 持 这 些 数 
值 ， 那 么 搞 这 么 多 档 位 不 就 是 多 余 的 吗 ? 

实际 上 ， 所 有 这 些 数值 关键 字 浏览 器 都 是 文 持 的 ， 之 所 以 没有 看 到 任何 粗细 的 变化 ， 是 因 
为 我 们 的 系统 里 面 缺乏 对 应 粗细 的 字体 。 尤 其 我 们 做 柬 面 器 项 目 时 ， 大 部 分 用 户 都 是 使 用 
Windows 系统 ， 而 Windows 系统 中 的 中 文字 体 粗 细 就 一 个 型 号 ， 如 “宋体 ”， 或 者 说 “微软 雅 

















此 》 最 终 的 效果 职 是 CSS 层面 的 S, 加 粗 和 站 下 名 尺寸 ,| SourceHanSansCN-Bold.otf 
‘| SourceHanSansCN-ExtralLight.o 
两 种 表 现 o 9 


,SourceHanSansCN-Heavy.otf 


假如 我 们 的 操作 系统 安装 了 该 字体 家 族 全 部 的 字 重 字体 ， 则 设 。 | seweerenseecvuemer 
置 300、400、500 时 ， 彼 此 之 间 就 能 看 出 明显 的 变化 了 。 例 如 ，OS | sourceHansansCN-Normalotf 
X 系统 中 的 “ 苹 方 ”” 又 如 我 这 里 即将 要 演示 的 “思源 黑体 办“ 思源 :| SourceHanSansCN-Regular.otf 
黑体 ”是 一 款 免费 的 开源 字体 ， 我 自己 电脑 上 的 版 本 有 7 个 字 重 ， 图 8-14 “思源 黑体 ”7 个 不 
如 图 8-14 所 示 。 同 字 重 的 字体 














此 时 ， 应 用 如 下 HTML 和 CSS 代码: 


<p class="f100"> 轻 如 鸿毛 ， 重 如 泰山 </p> 
<p class="f200"> 轻 如 鸿毛 ， 重 如 泰山 </P> 
<p class="f300"> 轻 如 鸿毛 ， 重 如 泰山 </p> 
<p class="f400"> 轻 如 鸿毛 ， 重 如 泰山 </p> 
<p class="f500"> 轻 如 鸿毛 ， 重 如 泰山 </p> 
<p class="f600"> 轻 如 鸿毛 ， 重 如 泰山 </p> 
<p Glass="f700"> 轻 如 鸿毛 重 如 秦山 </p> 
<p class="f800"> 轻 如 鸿毛 ， 重 如 泰山 </p> 
<p class="f900"> 轻 如 鸿毛 ， 重 如 泰山 </p> 





p { font-family: " Source Han Sans CN'; } 
.£100 { font-weight: 100; 
.£200 { font-weight: 200; 
.£300 { font-weight: 300; 
.£400 { font-weight: 400; 
.£500 { t-weight: 300; 
.£600 { font-weight: 600; 

| 

{ 

{ 


yk 


笃 如 汐 毛 ， 
轻 如 鸿毛 ， 
轻 如 鸿毛 ， 


.f700 { font-weight: 700; 
.£f800 { font-weight: 800; 
.f900 { font-weight: 900; 

结果 可 以 看 到 明显 的 字 重 变化 , 而 不 是 单纯 的 加 粗 和 正常 两 

种 形态 ， 如 图 8-15 所 示 。 

也 就 是 说 ，font-weight 要 想 真 正 发 挥 潜力 ， 问 题 不 

在 于 CSS 的 文 持 , 而 在 于 是 否 存 在 对 应 的 字体 文件 。 如 果 没 

有 对 应 的 字体 文件 ,我 又 想 有 多 档 字 重 效果 ,该 怎么 办 呢 ? ”图 8-15 “思源 黑体 ”在 CSS 不 同 

可 以 试 试 去 8.5 节 看 看 能 不 能 找到 答案 。 font-weight 值 下 的 效 采 


8.3.2 ”具有 近似 姐妹 化 属性 值 的 Eont-style 
font-style 表示 文字 造型 是 斜 还 是 正 , 与 font-weight 相 比 ， 其 属性 值 就 要 少 很 多 ， 如 下 : 


font-style: normal; 











EE 




















font-style: italic; 
font-style: oblique; 


其 中 ，italic 和 oblique 这 两 个 关键 字 都 表示 “和 斜体 ”的 意思 ， 可 以 说 是 一 对 姐妹 花 属性 。 
但 就 好 比 双 胞 胎 一 样 ， 融 算 长 得 再 像 也 会 有 差别 ， 那 么 italic 和 oblique 这 两 个 关键 字 的 
甜 别 在 哪里 呢 ? 

差别 在 于 : italic 是 使 用 当前 字体 的 斜体 字体 ， 而 oblique 只 是 单纯 地 让 文字 倾 笠 . 
如 条 当 前 字体 没有 对 应 的 斜体 字体 ， 则 退 而 求 其 次 ， 解 析 为 oblique， 也 束 是 单纯 形状 倾斜。 

我 们 平常 在 Web 上 使 用 比较 多 的 中 文字 体 ， 如 “宋体 “微软 雅 黑 ”等 ， 是 没有 专门 的 倾 
斜 字体 的 ， 因 此 ， 从 最 终 表 现 上 来 看 font-style:italic 和 font-style:oblidque 是 没 
有 区 别 的 。 但 是 ， 对 于 一 些 英 文字 体 ， 如 “Georsgia”， 情 况 束 不 一 样 了 ， 因 为 “Georsgia” 有 一 
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个 专门 设计 的 斜体 字体 文件 。 我 们 不 妨 简单 测试 一 下 ， HTML 和 CSS 代码 如 下 : 


<p class="i">Georgia italic</p> 

<p class="o">Georgia oblique</p> 

<p>Georgia normal</p> 

p { font-size: SOpx; font-family: Georgia; } 
.1 { font-style: italic; } 

.0 { font-style: oblique; } 


结果 可 以 看 出 ， 两 个 “倾斜 ”有 着 明显 的 不 同 ， 例 如 非常 明显 的 字母 e， 属 性 值 为 italic 时 
长 得 像 鱼 钩 ， 而 为 obliwue 时 长 得 像 糖葫芦 ， 如 图 8-16 所 示 ， 

之 所 以 会 专门 为 一 个 字体 设计 倾斜 字体 ， 就 是 一 
el ere italic 
“Georgia” 字 体 ， 当 字号 比较 小 同时 文字 倾斜 的 时 
候 ， 字 符 会 挤 作 一 团 ， 玻 密 不 规则 ， 可 读 性 比较 精 








CeoO1o7a oblique 


糕 。 相 比 之 下 ， 专 门 设 计 的 “Georgia” 和 斜体 阅读 体 (JeOT 1a normal 
验 就 要 好 很 多 。 再 加 上 没有 和 斜体 字体 时 italic 表 | 
现 会 和 oblique 一 致 ， 因此， 我 们 在 实际 开发 的 、 罩 816 “Georgia 字体 个 同 旧 “ 领 笛 。 笋 术 
时 候 ， 几 乎 没有 任何 理由 需要 使 用 font-style:oblique。 








8.3.3 不 适合 国情 的 font-variant 


font-variant 是 一 个 从 IE6 时 代 束 过 来 的 CSS 属性 ， 对 于 我 们 大 中 华 用 户 ， 其 支持 的 属 
性 值 和 作用 让 我 们 这 些 汉 字 用 户 沉 得 有 些 头疼 ， 实 现 小 体型 大 写字 母 ， 两 个 属性 值 要 么 normal， 
要 么 small-caps，font-variant:small-caps 了 束 是 可 以 让 殉 文 字符 表现 为 小 体型 大 写字 母 。 
代码 示意 如 下 : 


http://www.<span style="font-variant:small-caps">css-world.com</span>/ 


结 末 如 下 : 

http:/ /www.css-WoRLD-COMI 
也 就 是 大 小 跟 小 写字 母 一 样 ， 但 样式 是 大 写 ， 我 想 在 母语 是 瑞 文 的 国家 这 个 属性 估计 都 用 得 不 
多 ， 所 以 ， 大 家 人 简单 了 解 一 下 束 可 以 了 。 


8.4 font 届 性 


























8.4.1 ”作为 缩写 的 font 属性 


如 果 在 一 段 CSS 代码 中 发 现 了 font 属性 ， 八 九 不 离 十 就 是 利用 font 属性 进行 文本 相关 
样式 的 缩写 。 可 以 缩写 在 font 属性 中 的 属性 非常 多 ， 包 括 font-style、font-variant、 
font-weight、font-size、line-height、font-family 等。 完整 语法 为 : 





8.4 font 属性 243 


[ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? 
font-family | 


| | 表示 或 ，? 和 正则 表达 式 中 的 ?的 含义 一 致 ， 表 示 0 个 或 1 个 。 仔 细 观 察 上 面 的 语法 ， 会 发 现 
font-size 和 font-family 后 和 耐 没有 问 写 ,也 就 是 说 是 必需 的 ,古人 不 可 以 省 略 的 ,这 和 lpbackground 
属性 不 一 样 ，background 属性 虽然 也 支持 缩写 ， 但 是 并 没有 需要 两 个 属性 值 同 时 存在 的 限制 |。 

因此 ， 如 果 你 的 font 属性 缩写 无 效 ， 检 查 一 下 font-size 和 font-family 这 两 个 属 
性 是 否 同 时 存在 。 例 如 ， 下 面 CSS 语句 看 上 去 写 了 很 多 属性 ， 实 际 却 是 无 效 的 ， 因 为 缺 字体 : 


.font { font: normal 700 14px/20px; |} 
而 下 面 这 个 反而 是 有 效 的 ; 

.font { font: 14px '@'; } 

需要 注意 的 是 ，font 缩写 会 破坏 部 分 属性 的 继承 性 。 举 个 简单 的 例子 ， 假 设 你 的 页 面 行 
高 是 20px， 当 你 使 用 了 下 面 的 CSS 后: 


.font { font: 400 30px 'Microsoft Yahei'; } 


.font 元 素 的 行 高 Line-height 属性 值 就 被 重 置 为 了 normal， 而 不 同 浏 吃 右上 line- 
height:normal 是 不 一 样 的 ， 因 此 ， 在 使 用 font 缩写 的 时 候 ， 如 果 不 设 定 行 高 值 ， 一 定 会 
出 现 不 且 容 的 问题 。 换 句 话说 , 如 果 你 的 CSS 代码 原本 束 没 有 Line-height 属性 , 使 用 font 
缩写 反而 是 不 推荐 的 。 

另外 ， 还 有 一 个 令 人 很 头疼 的 问题 ， 束 是 font 缩写 必须 要 带 上 Fort—f em Ly 然而 ， 
原本 真实 继承 的 font-family 属性 值 可 能 会 很 长 ， 每 次 font 缩写 后 面 都 挂 一 个 长 长 的 字体 
列表 ， 令 人 很 是 不 怀 ， 有 什么 小 技巧 可 以 避免 吗 ? 

这 里 有 两 个 方法 。 

方法 一 : 我 们 可 以 随便 找 一 个 系统 根本 不 存在 的 字体 名 占 位 ， 如 字母 a， 或 者 特殊 一 点 ， 
用 笑脸 表情 @， 然 后 再 设置 Fo Tam Lr ee 来 重 置 这 个 占 位 字体 。 例如， 我 们 想 把 字 
号 和 行 高 合并 缩写 ， 就 可 以 这 样 : 

.font { 

fones 05 5605 及 TO; 


font-family: inherit,; 


} 
是 不 是 有 点 拆 东 增补 西 墙 的 感觉 ? 这 么 做 主要 是 因为 font 缩写 不 能 使 用 inherit 等 全 
局 关键 字 。 
方法 二 : 利用 @font face 规则 将 我 们 的 字体 列表 重 定义 为 一 个 字体 ， 这 是 兼容 性 很 好 、 
效益 很 蜗 的 一 种 解决 方法 ， 会 在 8.5 节 详 细 介 绍 。 


8.4.2 ”使 用 天 键 字 值 的 font 属性 
font 属性 除了 缩写 用 法 ， 还 支持 关键 字 属 性 值 ， 这 个 怕 是 很 多 人 都 不 知道 的 。 其 语法 如 下 : 
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font:caption | icon | menu | message-box | small-caption | status-bar 


如 果 将 font 属性 设置 为 上 面 的 一 个 值 ， 就 等 同 于 设置 font 为 操作 系统 该 部 件 对 应 的 
font， 也 就 是 说 直接 使 用 系统 字体 。 

根据 W3C 官方 维基 的 解释 ,以 及 我 自己 在 Windows 系统 下 的 测试 , 各 个 关键 字 的 含义 如 下 。 

。 _ caption: 活动 窗口 标题 栏 使 用 的 字体 。 

。 icon: 包含 图 标 内 容 所 使 用 的 字体 ， 如 所 有 文件 夹 名 称 、 文 件 名 称 、 破 盘 名 称 ， 甚 至 

浏览 器 窗口 标题 所 使 用 的 字体 。 

。 menu: 琳 单 使 用 的 字体 ， 如 文件 来 菜 蛙 。 

。 message-box: 消息 盒 里 面 使 用 的 字体 。 

e。 small-caption: 调 色 板 标题 所 使 用 的 字体 。 

。 status-bar: 窗 体 状态 栏 使 用 的 字体 。 

使 用 示例 : 


.menu { font: menu; |} 


需要 注意 的 是 ， 使 用 关键 字 作为 属性 值 的 时 候 必 须 是 独立 的 ， 不 能 添加 font-family 或 
者 font-size 之 类 的 ， 这 和 font 属性 缩写 不 是 一 个 路 子 。 如 果 混 用 ， 例 如 : 


.menu { font: 14px menu; |} 


则 此 时 的 menu 是 作为 自 定 义 的 字体 名 称 存 在 的 ， 而 不 是 表示 系统 的 menu 朋 单 字体 。 




















实际 上 ，font 关键 字 属 性 值 本 质 上 也 是 一 种 缩写 ， 里 面 已 经 包含 了 诸如 font-size 等 
信息 ， 如 图 8-17 一 图 8-19 所 示 。 


使 用 的 系统 字体 天 键 字 是 ;caption 恒 用 的 系统 主体 关键 字 是 : caption 
使 用 的 系统 字 何 关键 字 旺 : Icon 


使 用 的 系统 字 剧 关 钵 字 量 : menu 


使 用 的 系统 字体 天 键 字 是 :icon 
使 用 的 系统 字体 关键 字 旺 : menu 

司 用 的 系统 字 依 关键 字 星 : message-box 
使 用 的 又 统 主体 关键 字 星 : small-caption 
使 用 的 竺 统 字 仿 关键 字 是 : status-bar 


: message-box 


旦 : small-caption 





时 ; status-bar 





8-17 Windows 7 Chrome 下 font 8-18 ”Windows 7 IE 浏览 器 
天 键 字 属性 值 效 果 font 关键 字 属 性 值 效 果 





1 3 张 图 透露 出 不 少 重 要 的 信 忆 oO 从 Windows 下 使 用 的 系统 字体 关键 字 是 : caption font-size:13px: 
Chrome 和 IE 浏览 部 分 关键 字 的 字体 和 字号 表现 不 使 用 的 系统 字体 关键 字 是 : icon font-size:13px; 
一 样 可 以 看 中 ， 同 一 系 统 下 浏览 器 的 表现 是 有 差异 的 , 使 用 的 系统 字体 关键 字 是 : menu font-size:13px; 
证 Vian, 目 > 人 TVR 入 田 
就 这 么 一 说 ,好 像 也 没什么 , 但 左 如 霖 我 们 深入 思 郑 ， 使 用 的 系统 字体 关键 字 是 : small-caption font-size:12px; 
束 会 友 现 这 缘 后 是 有 问 题 的 : bn 然 Feyrit 天 键 字 属性 使 用 的 系统 字体 关键 字 是 : status-bar font-size:12px; 

» 3 网 日 大 日 | 一 一 
值 a da 那 为 何 同 系统 下 不 人 
同 浏 览 右 的 表现 会 不 一 样 呢 ? 显然 是 茶 个 浏览 器 出 现 关键 字 属 性 值 效 果 


使 用 的 系统 字体 关键 字 是 : message-box font-size:13px; 
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了 问题 。 后 来 ， 通 过 设置 修改 Windows 系统 相关 控件 的 默认 字体 我 有 友 现 ， 这 次 是 Chrome 
浏览 器 拖 了 后 腿 。caption、icon、message-box 这 3 个 关键 字 在 Windows 系统 下 的 
Chrome 浏览 句 中 似乎 是 无 效 的 ， 并 不 会 实时 跟 痢 系统 字体 走 ， 也 惑 是 说 ， 残 算 手 动 修改 了 
操作 系统 的 字体 ， 这 3 个 关键 字 还 :大 显示 浏览 幽 扶 认 的 宋体 ， 训 界 浏览 圳 重 局 、 济 蝎 费 天 级 
外 加 系统 重启 也 没有 用 ; 而 且 ，menu 这 个 关键 字 表 示 的 并 不 是 “ 沫 单 ” 而 是 “ 调 色 板 标 
题 ”smal1-caption。 而 所 有 这 些 问题 在 Firefox 和 IE 浏览 器 中 一 个 都 没有 ， 表 现 非 常 一 
致 ， 非 常 符合 预期 例如， 修改 “图 标 ” 字 体 为 “思源 黑体 ”， 如 图 8-20 所 示 ， 则 所 有 文件 
名 称 全 部 变 成 了 “思源 黑体 ”, 同时 font :icon 所 在 元 素 font-family 计算 值 也 成 了 “ 思 
源 早 体 "， 如 图 8.21 所 示 ， 





大 小 [加 ): 








字体 (P): 大 小 (E): 








| 轩 源 时 全 CN Nomal MM 24 使 用 的 系统 字体 关键 字 是 : icon font-size:12px fontfamily- 黑 源 黑体 CN Norma 








图 8-20 设置 系统 “图 标 项 目 ” 字 体 为 “思源 黑体 ” 图 8-21 font:icon 表现 为 “思源 黑体 ” 


考虑 到 Chrome 浏 帘 占 的 市 场 占 有 率 ， 我 们 在 使 用 font 属性 的 时 候 ， 要 避 开 caption、 
icon 和 message-box 这 3 个 关键 字 。 

对 于 不 同 的 操作 系统 ， 字 体 表现 不 一 样 ， 这 是 预料 之 中 的 ， 毕 竟 使 用 系统 字体 ， 而 不 同系 
统 默认 字体 肯定 是 不 一 样 的 ; 然后 字体 大 小 也 不 一 样 。 例 如 ,在 Windows 下 Chrome 的 caption 
字体 大 小 16px， 而 在 OS X 下 却 只 有 13px。 因 此 ， 在 实际 使 用 时 ， 我 们 还 需要 在 一 下 面 再 设 
定 一 下 font-size 大 小 来 保证 一 臻 性。 照 理 讲 ， 直 接 这 样 设置 就 可 以 了 : 


html { 


font: menu; 





font-size: 16px; 


} 
但 是 ， 实 际 上 ，IE8 浏览 器 会 英名 其 妙 地 忽略 这 里 的 font-size:16px， 因 此 ,一 般 都 是 下 面 
这 样 处 理 : 


html { font: menu; |} 
body { font-size: 1l16px; } 





除了 caption、 icons menu、 message-box、 small-caption 和 status-bar; 还 
有 很 多 其 他 非 标 准 的 关键 字 ， 如 button、checkbox、 checkbox-group、 Combo-box、 
desktop、dialog、 document.、\ field、hyperlink、 1ist-menu、 menu-item,、 menubar.、 
outline-tree 、 password、 pop-up-menu、 Pull-down-menu、 push-button、 
adio-button tradio-oroues Faldge. Siondture, tabs Fooltigss windew 1 
workspace。 不 过 ， 这 些 关 键 字 浏 览 器 大 多 不 文 持 ， 尽 管 Firefox 浏览 器 文 持 一 部 分 ， 但 是 需 
要 添加 私有 前 级 -moz-。 例 如 : 
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font: -moz-button; 


因此 , 它们 的 实际 应 用 价值 不 大 。 另 外 ，WebKit 浏览 器 还 支持 其 他 关键 字 , 如 font: -webkit- 
contzo1l， 如 网 8-22 所 示 。 
ee 


-webkit-control 
-webkit-mini-control 


webkit-pictograph 


-webkit-small-control 
dy { -webkit-xxx-large 


-Webkit bod 
= Fe rr ， 





图 8-22 ”WebKit 文 持 的 font 关键 字 属 性 值 
这 些 私 有 关键 字 的 价值 仅 限 于 了 解 。 
8.4.3 ”font 天 键 字 属性 值 的 应 用 价值 
说 了 这 么 多 ，font 关键 字 属 性 值 的 价值 如 何 呢 ? 有 没有 合适 的 使 用 场景 呢 ? 有， 并且 相 


当 适 合 ! 
目前， 非常 多 网 站 的 通用 font-family 和 直接 就 是 : 


html { font-family: 'Microsoft YafHei'; } 


知道 问题 在 哪里 吗 ? 这 样 一 设置 ， 束 意味 着 所 有 操作 系统 下 的 所 有 浏 贤 副 都 要 使 用 “人 微软 
雅 黑 ”字体 。 假 如 说 用 户 的 iMac 或 者 macbook 因为 某 些 原因 安装 了 “微软 雅 黑 ”字体 ， 那 岂 
不 是 这 些 系统 原本 更 加 漂亮 的 中 文字 体 就 不 能 使 用 了 ? 

于 是 ， 人 们 就 会 有 这 样 的 需求 : 希望 非 Windows 系统 下 不 要 使 用 “微软 雅 黑 ”字体 ， 而 是 
使 用 其 系统 字体 。 怎 么 处 理 呢 ? 

一 种 方法 是 可 以 试 试 使 用 非 标准 的 -apple-systenm 等 关键 字 字体 ， 具 体 方法 如 下 : 

html { font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei'; } 

这 能 够 一 定 程度 上 满足 我 们 的 需求 ， 但 是 毕 竞 是非 标 准 的 属性 值 ， 说 不 定 哪 天 束 被 浏览 串 
舍弃 了 ， 因 此 知 非 迫不得已 ， 还 是 少 用 为 妙 。 

顺便 多 说 两 句 ， 实 际 上 还 真有 标准 的 系统 字体 关键 字 ， 叫 作 system-ui， 使 用 示例 如 下 : 


html { font-family: system-ui; } 


在 我 号 这 段 内 容 的 时 候 ， 仅 Chrome 浏览 器 支持 它 〈《 从 版 本 56 开始 )， 并 且 ， 根 据 我 的 在 
Windows 电脑 上 的 测试 ，Chrome 浏览 器 的 system-ui 指 的 就 是 “ 调 色 板 标题 ”对 应 关键 字 
small-caption 使 用 的 字体 ， 有 点 儿 出 平 我 的 意料 。 

压轴 的 总 在 最 后 ， 显 然 还 有 个 更 好 的 方法 就 是 使 用 这 里 的 font 关键 字 ， 这 是 标准 属性 ， 
10 年 前 浏览 占 就 支持 了 ， 可 以 放心 使 用 。CSS 代码 如 下 《三 选 一 即 可 ): 


html { font: menu; |} 
body { font-size: 1l16px; } 





























8.5 真正 了 解 @font face 规则 247 


html { font: small-caption; } 
body { font-size: 16px; } 


html { font: status-bar; } 
body { font-size: 1l16px; } 


没有 洋洋 酒 酒 的 字体 列表 ， 简 简单 单 的 几 个 声明 就 可 以 让 各 个 系统 使 用 各 自 引 以 为 傲 的 字 
体 。 有 人 说 “我 有 选择 恐惧 症 ， 不 知 该 使 用 哪 一 个 "， 那 就 选 最 短 最 好 记 的 那个 : 


html { font: menu; } 
body { font-size: 16px; } 


最 后 ， 我 要 对 font 关键 字 属 性 值 的 用 法 做 一 个 点 评 。 

让 网 页 的 字体 跟 系 统 走 ， 对 设计 师 而 言 ， 其 实 是 一 个 比较 冒险 的 做 法 ， 因 为 最 终 呈 现 的 字 
体 是 不 可 控 的 。 举 个 例子 ， 茶 女生 非常 喜欢 可 爱 风 格 ， 于 是 就 把 她 的 电脑 主题 变 成 了 非常 可 爱 
的 风格 ， 沫 单 栏 的 字体 全 部 变 成 那 种 很 可 爱 的 字体 ， 此 时 ，font :menu 所 呈现 的 惑 不 是 “ 微 
软 雅 黑 ”， 而 是 这 个 用 户 定 义 的 “可 爱 字 体 ”， 这 可 能 不 是 设计 师 想 看 到 的 ， 因 为 往往 会 跟 目 己 
的 网 页 设计 风格 不 一 致 。 但 是 ， 转 念 一 想 ， 万 一 这 是 用 户 想 看 到 的 呢 ? 既然 用 户 把 目 己 的 主题 
设 为 该 字体 ， 那 吏 说 明 这 个 用 户 对 这 个 字体 并 不 排斥 ， 而 是 喜欢 。 当 她 浏览 网 页 的 时 候 ， 发 现 
束 你 的 网 站 呈现 出 了 她 襄 欢 的 那 种 字体 ， 你 说 会 不 会 给 用 户 一 种 “你 懂 我 的 心 ” 的 感觉 呢 ? 对 
用 户 而 言 ， 反 而 成 了 一 种 情感 化 的 设计 ! 

另外 ， 让 网 页 的 字体 跟 系 统 走 ， 还 有 一 个 更 加 长 远 的 好 处 。 随 着 软件 的 不 断 发 展 ， 我 们 的 操 
作 系 统 的 默认 中 文字 体 一 定 古 越 来 越 好 看 ， 如 末 网 页 的 font-family 定 死 为 某 个 字体 ， 用 户 就 
无 法 及 时 至 受到 新 系统 新 字体 市 来 的 恰 悦 的 视觉 感受 。 举 个 例子 ，OS X 的 默认 中 文字 体 其 实 已 
经 变 过 好 多 次 了 ， 例 如 ， 你 今天 与 了 个 页 面 ， 字 体 设 置 为 很 潮 的 “ 芋 方 ”， 过 两 年 说 不 定 会 出 来 
更 好 的 名 叫 “ 梨 方 ”的 字体 ， 我 打包 票 ， 网 站 绝对 是 不 会 跟 进 的 ， 因 为 大 多 数 的 线 上 项 目 维护 都 
不 会 管 font-family 这 种 边 边 角 角 的 事情 ， 因 此 ， 就 算 很 多 年 过 去 了， 网 站 使 用 的 依然 古老 字 
体 。 但 是 ， 如 果 使 用 的 是 font 关键 字 属 性 值 ， 束 完全 不 会 有 这 样 的 问题 ， 网 站 字体 能 时 时 刻 刻 
与 时 俱 进 。 


8.5 真正 了 解 efont face 规则 


很 多 人 只 要 一 提 到 @font face 规则 ， 心 中 就 会 不 由 目 主 “ 哦 ”地 一 声 :“ 这 个 我 知道 ， 
可 以 用 来 生成 自 定 义 字 符 小 图 标 !” 话 是 没 错 , 问题 在 于 很 多 人 以 为 生成 字符 小 图 标 就 是 @font 
face 规则 的 全 部 ， 实际 上 这 只 是 其 功能 之 “ -日 真正 了 解 @font face 规则 ， 你 会 发 现 ， 
Gefont face 规则 可 以 做 的 事情 其 实 非常 多 。 
8.5.1 Q@font face 的 本 质 是 变量 


虽然 说 CSS3 新 世界 中 才 出 现 真 正 意义 上 的 变量 var， 但 实际 上 ， 在 CSS 世界 中 已 经 出 现 
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了 本 质 上 就 是 变量 的 东西 ，@font face 规则 就 是 其 中 之 一 。@font face 本 质 上 就 是 一 个 定 
义 字 体 或 字体 集 的 变量 ， 这 个 变量 不 仅仅 是 简单 地 上 自 定 义 字 体 ， 还 包括 字体 重 命 名、 默认 字体 
样式 设置 等 。 

Gefont face 规则 支持 的 CSS 属性 有 font-family、src、font-style、font-weigh、 


unicode-range、 font-variant、 font-stretch 和 font-feature-settings。 例如 : 





Qfont-face { 
font-family: ‘example'; 
src: url (example.ttf); 
font-style: normal; 
font-weight: normal; 
unicode-range: U+0025-00FF; 
font-variant: small-caps; 
font-stretch: expanded; 
font-feature-settings: "ligal™" on; 


} 

属性 还 是 挺 多 的 ， 而 且 有 些 属 性 估计 是 他 认识 你 ， 你 不 认识 他 。 但 是 从 实用 角度 来 讨 ， 有 
些 属性 其 实 可 以 不 用 去 深究 ， 比 如 font-variant、font-stretch 和 font-feature- 
settings 这 3 个 属性 。 为 什么 呢 ? 因为 按照 我 的 经 验 ， 这 3 个 属性 给 我 感 党 更 像 是 专 为 英文 
设计 的 ， 所 以 如 果 不 是 有 业务 需要 ， 可 以 移 放 一 放 。 再 加 上 后 两 个 是 CSS3 新 属性 ， 本 书 束 不 
做 进一步 介绍 了 。 

好 ， 现 在 ， 是 不 是 感觉 压力 一 下 子 小 了 很 多 ?我们 需要 在 意 的 可 以 目 定 义 的 属性 就 只 剩 下 
下 面 这 些 : 


Gfont-face { 
font-family: ‘example'; 





























所 








src: url (example.ttf); 
font-style: normal; 
font-weight: normal; 
unicode-range: U+0025-00FF; 
. 
估计 有 人 会 有 疑惑 : efont-face 规则 中 的 font-style、font-weight 和 unicode- 
range 这 些 属 性 有 什么 用 , 尤其 是 font-style ft font=weidtits 实际 上 ,这 里 的 每 个 属性 
都 不 是 泛泛 之 磋 ， 都 是 有 故事 的 。 
我 们 一 个 一 个 来 介绍 。 有 必要 预先 说 明 一 下 ， 为 了 更 清晰 地 和 示意， 下面 的 CSS 示意 代码 都 
刻意 做 了 简化 处 理 。 
1. font-family 
这 里 的 font-family 可 以 看 成 是 一 个 字体 变量 ， 名 称 可 以 非常 随意 ， 如 直接 用 一 个 美元 
符号 !$'。 例 如 : 














Qfont-face { 
font-family: 'S$'); 
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src: url (example.ttf); 


} 

韭 契 浏览 器 下 甚至 可 以 直接 使 用 纯 空格 ' ' 。 不 过 有 一 点 需要 注意 ， 就 是 使 用 这 些 稀 奇 古 
怪 的 字符 或 者 空格 的 时 候 ， 一 定 要 加 引号 。 

里 然 说 目 己 变量 名 可 以 很 随意 ， 但 是 有 一 类 名 称 不 能 随便 设置 ， 束 古 原本 系统 就 有 有 的 字体 
名 称 。 例 如 ， 如 末 使 用 下 面 的 代码 从 此 “微软 雅 黑 ”字体 就 变 成 了 这 里 example .ttf 对 应 的 
字体 了 。 


Gfont-face { 
font-family: 'Microsoft Yahei'; 

















src: url (example.ttf); 


} 


2. src 

src 表示 引入 的 字体 资源 可 以 是 系统 字体 , 也 可 以 是 外 链 字 体 。 如 宁 是 使 用 系统 安装 字体 ， 
则 使 用 local () 功能 符 ， 如 果 是 使 用 外 链 字 体 ， 则 使 用 url () 功能 符 。 由 于 local () 功能 符 
IE9 及 其 以 上 版 本 浏 贤 絮 才 文 持 ， 非 第 实用 ， 而 本 书目 标 浏览 絮 包 含 IE8 浏览 器 ， 因 此 不 做 展 
开 ， 有 兴趣 的 读者 可 以 参考 我 的 博客 文章 : http:/www.zhangxinxu.com/ wordpress/?p=6063。 

因此 ， 这 里 着 重 介绍 url () 功能 符 。 

目前 在 业界 ， 几 是 使 用 目 定 义 字 体 的 ， 关 不 多 都 是 下 面 这 种 格式 : 











Qfont-face { 
font-family: ICON; 


src: url('icon.eot') format('eot'"');) 

src: url('icon.eot?#iefix') format ('embedded-opentype'), 
url('icon.woff2') format ("woff2") 
url('icon.woff') format ("woff"), 
url('icon.ttf') format ("typetrue"), 
url('icon.svg#icon') format ('svg'); 





font-weight: normal; 
font-style: normal; 


} 
不 知 大 家 有 没有 思考 过 : 为 什么 这 里 需要 有 两 个 src 了 呢 ? #iefix 是 干什么 用 的 呢 ? 
format () 功能 符 有 什么 作用 , 可 不 可 以 省 略 ? 这 么 多 字体 格式 都 是 需要 的 吗 ? font-weight: 
normal 和 font-style:normal 是 不 是 多 余 的 ? 
先 解答 一 下 字体 格式 的 问题 。 上 面 这 段 CSS 代码 一 共 出 现 了 5 种 字体 格式 ， 分 别 
A Ot. WO WoOFtfs wtt tM. awe 
。 svg 格式 是 为 了 兼容 1OS 4.1 及 其 之 前 的 版 本 , 考虑 到 现 如 今 iOS 的 版 本 数 已 经 翻 了 一 
番 ， 所 以 svg 格式 的 兼容 代码 大 可 舍弃 。 

。 eot 格式 是 了 正 私 有 的 。 注 意 ， 目 前 所 有 版 本 的 下 浏览 器 都 文 持 eot 格式 ， 并 不 是 只 
有 IE6 一 下 8 支持 。 只 是 ，IE6~IE8 仅 支 持 eot 这 一 种 字体 格式 。 

。 woff 是 web open font format 几 个 词 的 首 字母 简写 ， 是 专门 为 Web 开发 而 设计 的 字体 
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格式 ， 显 然 是 优先 使 用 的 字体 格式 ， 其 字体 尺寸 更 小 ， 加 载 更 快 。Android 4.4 开始 全 
面 文 持 。 

。 woff2 是 比 woff 尺寸 更 小 的 字体 ， 小 得 非常 明显 。 因 此 ，Web 开发 第 一 首选 字体 就 
是 woff2， 只 是 此 字体 目前 仅 Chrome 和 Firefox 文 持 得 比较 好 。 

。 ttf 格式 作为 系统 安装 字体 比较 多 ，Web 开发 也 能 用 ， 束 是 尺寸 大 了 点 儿 ， 优 点 在 于 
老 版 本 Android 也 支持 。 

综合 上 面 的 分 析 ， 我 们 可 以 得 到 如 下 的 结论 。 

(1) svg 格式 果断 舍弃 。 

(2) 如 果 无 须 兼 容 IE8 浏览 器 ，eot 格式 宋 断 舍弃 。 

(3) 如 果 无 须 兼 容 Android 4.3 之 前 版 本 手机 ，ttf 格式 果断 舍弃 。 

也 就 是 说 ， 之 所 以 上 面 会 放 这 么 多 字体 格式 ， 完 全 是 因为 “兼容 性 ”这 3 个 字 。 如 果 你 的 
项 目 没 有 那么 多 兼容 顾虑 ， 大 可 精简 一 些 人 代码。 当然， 如 果 站 在 用 户 的 角度 ， 字 体格 式 多 一 点 
儿 也 没什么 ， 反 正 现 在 都 是 工具 生成 的 ， 多 了 几 十 个 字母 而 已 ， 又 不 会 产生 多 余 的 请 求 ， 说 不 
定 真有 用 户 使 用 古 重 手 机 呢 ， 那 不 瓯 赚 到 了 ? 

上 和 耐 说 的 话 很 在 理 ， 但 这 并 不 表示 上 和 面 的 代码 束 没 有 优化 的 空间 了 。 正 如 上 面 提 到 的 ， 应 
当 优 先 使 用 woff2， 然 后 是 woff 格式 字体 。 但 是 ， 如 果 我 们 仔细 看 上 面 的 代码 就 会 发 现 ， 在 
IE 浏览 器 下 ， 使 用 的 永远 是 eot 格式 的 字体 (因为 排 在 最 前 )， 而 woff 格式 字体 从 IE9 开始 
束 文 持 了 ， 浏 览 器 好 的 特性 都 没 用 上 啊 ! 但 是 ， 我 们 又 不 能 简单 地 把 woff 格式 提前 ， 否 则 会 
影响 低 版 本 下 浏览 器 的 字体 显示 。 怎 么 办 呢 ? 有 一 个 小 技巧 如 下 : 


Qfont-face { 
font-family: ICON; 
































src: url('icon.eot') format('eot');) 
Se LOGal.( Oy) 
url('icon.woff2') format ("woff2") 
url('icon.woff') format ("woff"), 
url('icon.ttf') format ("typetrue"); 





} 

由 于 正 6 一 正 8 不 认识 功能 符 ， 于 是 下 面 一 个 src 被 完美 避 开 了 。 此 时 ，IE9 浏览 器 就 可 以 
正大 光明 地 享用 woff 字体 格式 了 ! 

接 下 来 解答 #iefix 有 什么 用 的 问题 ,实际 上 ,#iefix 是 没什么 用 的 “你 在 开玩笑 吗 ? ” 
没有 ， 这 里 的 #iefix 确实 没什么 用 ， 真 正 有 用 的 其 实 是 前 面 的 问号 。 束 跟 变 魔术 一 样 ， 吸 
引 我 们 眼球 的 往往 不 是 关键 所 在 。 是 这 样 的 ,， IE9 之 前 的 版 本 解析 有 一 个 严重 的 问题 ， 当 src 
属性 包含 多 个 ur1 () 时 ， 会 把 长 长 的 字符 当 作 一 个 地 址 解析 而 返回 404 错误 。 因 此 把 eot 
格式 放 在 第 一 位 ， 然 后 在 字体 文件 url 地 址 后 加 上 问号 ， 这 样 IE9 之 前 的 版 本 会 把 问号 之 后 
的 内 容 当 作 url 的 参数 。 好 吧 ，#iefix 严格 来 说 还 是 有 点 儿 用 的 ， 它 可 以 让 请 求 地 址 短 一 
些 ， 因 此 请 求 地 址 是 不 包括 锁 点 标志 # 及 其 后 面 的 内 容 的 。 如 果 按 照 这 种 说 法 ， 那 岂 不 是 说 
iefix 这 几 个 字符 多 余 ? 没 错 ， 多 余 ! 不 懂 的 人 不 知道 是 干什么 用 的 ， 懂 的 人 知道 它 是 没 什 
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么 用 的 ， 因 此 多 余 。 

下 面 轮 到 “为 什么 需要 两 个 src” 这 个 问题 了 。 如 果 是 原生 的 IE7 和 IE8 浏览 器 ， 第 一 个 
src 实际 上 是 多 余 的 , 为 什么 这 么 讲 呢 ?之 所 以 要 放 上 来 , 很 大 一 部 分 原因 是 为 了 测试 工程 师 。 
因为 现在 测试 工程 师 测试 低 版 本 的 正 浏览 器 喜欢 使 用 兼容 模式 ， 兼 容 模 式 的 下 和 原生 同 版 本 
的 正 的 解析 是 有 区 别 的 ， 其 中 区 别 之 一 束 是 兼容 模式 的 三 7 和 IE8 不 认识 问号 (?) 解决 方案 ， 
导致 第 二 个 src 无 法 识别 ， 不 得 已 才 多 了 第 一 行 的 src。 

font-weight:normal 和 font-style:normal 是 不 是 多 余 的 ? 我 的 回答 是 ， 如 果 你 
没有 同 字 体 名 的 多 字体 设置 ， 则 和 它 就 是 多 余 的 ， 至 少 我 在 冲 规 项 目 中 删 掉 这 两 行 CSS 没有 出 现 
任何 异 第 。 

最 后 的 问题 是 : format () 功能 符 有 什么 作用 ， 可 不 可 以 省 略 ? 我 的 回答 是 最 好 不 要 省 略 。 
format () 功能 符 的 作用 是 让 浏览 右 提 前 知道 字体 的 格式 ， 以 决定 是 否 需要 加 载 这 个 字体 ， 而 
In da 
eot 和 ttf 两 种 格式 字体 : 


Qfont-face { 
font-family: ICON; 
src: url('icon.eot'), 

url('icon.ttf"'); 
































} 


浏览 右 对 文件 格式 的 判断 不 是 基于 后 绥 名 ， 下 面 这 种 写法 只 会 加 载 ttf 这 一 种 格式 字体 ， 
因为 浏 抠 硕 提 前 知道 了 文件 格式 是 目 己 无 法 识别 的 : 


Qfont-face { 
font-family: ICON; 
src: url('icon.eot') format ("embedded-opentype"), 
url('icon.ttf"'); 








} 
于 是 ， 综 合 上 面 的 全 部 知识 会 及 现 ， 业 界 第 用 的 这 套 东 西 ， 其 实 可 以 优化 成 下 面 这 样 : 


Gfont-face { 
font-family: ICON; 


src: url('icon.eot');: 


src: local('©"), 
url('ijcon.woff2') format ("woff2"), 
url('icon.woff') format ("woff"), 
url('icon.ttf"'); 





} 


有 一 种 一 周 瘦 10 斤 的 感觉。 

3. font-style 

在 Chrome 浏览 器 下 ，Q@font face 规则 设置 font-style:italic 可 以 让 文字 倾斜 ， 
但 是 这 并 不 是 其 作用 所 在 。 

efont face 规则 中 的 font-style 和 font-weight 类 似 ， 都 是 用 来 设置 对 应 字体 样 
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式 或 字 重 下 该 使 用 什么 字体 。 因 为 有 些 字 体 可 能 会 有 专门 的 斜体 字体 ， 注 意 这 个 笠 体 字体 并 不 
是 让 文字 的 形状 倾斜 ， 而 是 专门 设计 的 倾斜 的 字体 ， 所 以 很 多 细 市 会 跟 物 理 上 的 请 求 不 一 样 。 
于 是 ， 我 在 CSS 代码 中 使 用 font-style:italic 的 时 候 ， 束 会 调用 这 个 对 应 字体 ， 如 下 
示意 : 

Qfont-face { 

font-family: "I'; 
font-style: normal; 
src: local ('FZYaoti'); 

} 

Qfont-face { 
font-family: "I'; 
font-style: italic; 
src: local ('FZShuTi'),; 

} 

由 于 专门 的 斜体 字 不 太 好 找 ， 所 以 我 使 用 “方正 姚 体 ” 和 “方正 舒 体 ” 代 蔡 做 示意 。 我 解 
读 一 下 上 面 的 CSS 代码 : 制定 一 个 学 体 ， 名 叫 'I'， 当 文字 样式 正常 的 时 候 , 字体 表现 使 用 “ 方 
正 姚 体 ” 当 文 字 设 置 了 font-style:italic 的 时 候 ， 字 体 表现 为 “方正 舒 体 ”。 

好 ， 现 在 假设 有 下 面 这 样 的 CSS 和 HTML: 

.1 { 

font-family: I; 

’ 

<p><i class="i"> 类 名 是 i， 标签 是 i</i></p> 

<p><span class="i"> 类 名 是 i， 标签 是 span</span></p> 

请 问 最 终 的 表现 会 是 怎样 的 ? 

由 于 <i> 标 签 天 然 有 font-style:italic， 因 此 理论 上 ， 上 面 一行 文字 表 现 为 “方正 舒 
体 ”， 下 面 一 行为 “方正 姚 体 ”， 最 终结 果 如 何 呢 ?看 ， 完 全 符合 ， 
如 图 8-23 所 示 。 

这 下 大 家 应 该 明白 @font face 规则 中 的 font-style 是 干 














什么 用 的 了 吧 。 8-23 Q@font face 中 
4. font—weight font-style 作用 示意 


font-weight 和 font-style 类 似 ， 只 不 过 它 定义 了 不 同 字 重 、 使 用 不 同 字 体 。 对 中 文 
而 言 ， 这 个 要 比 font-style 适用 性 强 很 多 。 我 举 个 比较 有 代表 性 的 例子 演示 一 下 它 的 作用 : 
版 权 字 体 “ 汉 仪 旗 黑 ” 字 重 非 常 丰 定 ， 但 是 这 个 字体 不 像 “ 思 源 黑 体 ”， 天 然 可 以 根据 
font-weight 属性 值 加 载 对 应 的 字体 文件 ， 那 怎么 办 呢 ? 很 简单 ， 使 用 afont face 规则 重 
新 定义 一 下 即 可 。 例 如 ， 使 用 下 面 的 CSS 代码 : 


Qfont-face { 
font-family: 'QH'; 
font-weight: 400; 
src: local('HYQOihei 40S 7" ) ; 
} 
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Qfont-face { 
font-family: 'QH'; 
font-weight: 5007 
src: local('HYQOihei 50S"'); 
} 
Qfont-face { 
font-family: 'QH'; 
font-weight: 600; 
src: local('HYQihei 60S"'); 
} 


解读 一 下 就 是 : 是 一 个 全 新 的 字体 ， 名 为 'QH' 。 当 字 重 font-weight 为 400 的 时 候 ， 


使 用 “ 汉 仪 旗 黑 40S” 字 重 字 体 ; 为 500 的 时 候 ， 使 用 “ 汉 仪 旗 黑 50S” 字 重 字 体 ; 为 600 的 
时 候 ， 使 用 “ 汉 仪 旗 黑 60S” 字 重 字 体 。 

于 是 ， 当 我 们 使 用 如 下 CSS 和 HTML 代码 的 时 候 : 

.hy-40s, 

.hy-D50s， 

.hy-60s { 


font-family: 'QH'; 
} 
.hy-40s { 
font-weight: 400; 
} 
.hy-50s 1 
font-weight: 500; 
} 
.hy-60s { 
font-weight: 600; 
} 
<ul> 
<1i class="hy-40s"> 汉 仪 旗 黑 40s</1i> 
<1i class="hy-50s"n> 汉 仪 旗 黑 50s</1i> 
<li class="hy-60s"> 汉 仪 旗 黑 60s</1i> 
</ul> 


就 可 以 看 到 文字 粗细 错落 有 致 的 效果 ， 如 图 8-24 所 示 。 

如 采用 在 网 页 开发 中 ， 必 定 会 让 我 们 的 界面 更 加 细腻 ， 设 计 更 
加 精致 ， 视 觉 更 加 愉 避 。 然 而 ， 此 处 的 案例 是 基于 local () 功能 
和 从 的 ，IE8 浏览 器 并 不 支持 ， 因 此 font-weight 原本 作用 的 使 用 图 8-24 efont face 中 
场景 受到 了 一 定 的 限制 ， 只 能 渐进 使 用 。 但 是 ， 正 如 很 多 其 他 CSS 。 font-weight 作用 示意 
属性 一 样 ， 广 泛 使 用 的 功能 往往 并 不 是 其 设计 之 初 的 功能 ， 而 是 基于 一 些 特 性 衍生 出 来 的 ， 由 
于 font-weight 文 持 100 一 900 足 足 9 个 字 重 ， 而 font-style 仅 “ 正 ”和 “和 斜 ” 两 类 ， 
此 ,font-weight 就 个 委 以 重任 来 实现 “ 啊 应 式 图 标 ”， 而 正 7 和 IE8 浏览 右 都 是 文 持 这 个 的 。 

所 谓 “ 啊 应 式 图 标 ?”， 指 的 是 字号 较 大 时 图 标 字 体 细节 更 丰 理 ， 字 号 较 小 时 图 标 字 体 更 简 
单 的 响应 式 处 理 。 对 比 效果 如 图 8-25 所 示 。 
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代码 示意 如 下 : 


Qfont-face { 
font-family: ICON; 

url (icon-large.eot);) 

local ("©"), 


url (icon-large.woff);) 


SIC: 


SLC: 


font-weight: 700; 
} 
Qfont-face { 
font-family: ICON; 


url (icon-medium.eot),; 
local ("©"), 


url (icon-medium.woff);) 


SC 


STC. 


font-weight: 4007 
} 
Qfont-face { 
font-family: ICON; 


url (icon-small.eot),;} 
local ("©"), 
url(icon-small .woff) ， 
1007 


与 上 全。 


与 上 人 。 


font-weight: 
} 


此 时 ， 不同 的 font-weight 会 加 载 不 同 的 图 标 字 体 ， 
的 图 标 显 示 细 节 。 假 设 有 下 面 的 CSS 设置 : 








.jcon { 
font-family: ICON; 

} 

.lcon-large { 
font-weight: 700; 
font-size: 128px; 

} 

.lcon-medium { 
font-weight: 400; 
font-size: 64px; 

} 

.lcon—-small { 
font-weight: 1007 
font-size: 16px; 


} 





图 8-25 “响应 式 图 标 ” 效 果 示 总 


然后 就 能 根据 具体 的 场景 细 化 我 们 





则 下 面 HTML 代码 中 的 3 个 <i> 标 签 所 显示 的 效果 分 别 对 应 “弱化 细节 的 图 标 ”“ 细 节 较 丰 宙 


图 标 ” 和 “细节 最 丰富 图 标 ”: 


<i class="icon icon-small">&#xl1lf3a4;</i> 
<i class="icon icon-medium">&#xlf3a4;</i> 
<i class="icon icon-large">&#xlf3a4;</i> 
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5. unicode-range 

unicode-range 的 作用 是 可 以 让 特定 的 字符 或 者 特定 范围 的 字符 使 用 指定 的 字体 .例如 ， 
“微软 雅 黑 ” 字体 的 引号 左右 间 隐 不 均 ， 方 癌 不 明 ， 实 在 是 看 着 不 舒服 ， 此 时 我 们 就 专门 指定 这 
两 个 引号 使 用 其 他 字体 ，CSS 代码 如 下 : 


Qfont-face { 
font-family: gquote; 


src: local('SimSun');} 我 是 向 软 雅 息 吃 








unicode-range: U+201lc, U+201d; 
} 


| 
a 我 是 @@ 微 软 雅 墨 问 


font-family: quote, ‘Microsoft Yahel ' ， 





} 8-26 unicode-range 的 

此 时 效果 就 会 如 图 8-26 所 示 。 人 

由 于 IE8 浏览 器 不 支持 unicode-range 属性 ， 因 此 ， 这 里 仅 人 简单 提 及 ， 不 做 展开 ， 更 多 
内 容 可 参考 我 写 的 博客 文章 : http://www.zhangxinxu.com/wordpress/?p=6063。 


8.5.2 Q@font face 与 字体 图 标 技 术 


从 面 同 未 来 的 角度 讲 ， 字 体 图 标 技术 的 使 用 会 越 来 越 边缘 化 ， 因 为 和 SVG 图 标 技术 相 比 ， 
其 唯一 的 优势 束 古 羔 容 一 些 老 的 正 浏览 血 。 等 再 过 几 年 ，IE8 等 浏览 右 彻 底 锌 淘汰 了， 我 们 束 
没有 任何 使 用 字体 图 标 技术 的 理由 了 。 

SVG 图 标 同样 是 矢量 的 , 同样 闫 色 可 控 , 但 资源 占用 更 少 , 加载 体验 更 好 ， 呈 现 效 果 更 佳 ， 
更 加 符合 语义 ， 我 个 人 是 非常 推 党 SVG 图 标的 。 

目前 ， 对 于 很 多 加 面 亲 Web 项 目 ，IE8 浏览 右 还 是 不 能 忽视 的 ， 因 此 ， 衬 体 图 标 拉 术 依然 
是 非常 值得 推荐 的 技术 选 型 ， 因 为 和 传统 的 图 片 图标 相 比 ， 字 体 图 标的 尺寸 大 小 和 颜色 控制 非 
第 方便 ， 开 发 维护 方面 占用 流量 小 很 多 ， 收 益 是 非常 明显 的 。 

对 字体 图 标 ， 我 们 可 以 手工 使 用 一 些 软件 制作 ， 但 这 种 做 法 效率 非常 低下 ， 也 不 好 维护 ， 
所 以 基本 上 现在 都 是 使 用 工具 来 完成 , 如 使 用 iconfont.cn 这 样 的 在 线 工 具 , 或 者 使 用 基于 Node.js 
的 一 些 开源 工具 。 

根据 我 的 使 用 经 验 ， 这 些 工具 都 会 生成 类 似 下 面 这 样 的 CSS 代码 : 

@font-face { 


font-family: ICON; 


src: url (icon.eot),;)} 





















































src: url (icon.eot?#iefix) format ('embedded-opentype'), 
url(icon.eot.woff2) format ('woff2°'), 
url(icon.eot.woff) format ('woff'),;) 
} 
.lcon { 
font-family: ICON; 
} 


.licon-microphone:before { 
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content: '\1f3a4' 
} 


这 里 出 现 两 个 需要 关注 的 东西 ， 一 个 是 字体 ， 另 一 个 是 字符 ， 而 这 两 个 东西 就 是 字体 网 标 
技术 的 本 质 所 在 。 

我 们 不 妨 先 来 粗略 了 解 一 下 字体 的 本 质 是 什么 。 所 谓 字 体 ， 本 质 上 是 字符 集 和 图 形 的 一 种 
映射 关系 。 这 么 解释 似乎 还 是 有 些 所 口 ， 那 我 再 换个 更 通俗 一 点 儿 的 比方 吧 。 一 个 字体 文件 就 
好 比 一 个 巨型 商品 房 ， 里 面 有 很 多 房间 ， 每 个 房间 都 有 一 个 唯一 的 门牌 号 ， 然 后 这 些 房间 就 专 
门 用 来 挂名 男 。 

这 里 的 “门牌 号 ”就 是 “字符 集 ”, “房间 里 的 名 画 ” 束 是 我 们 的 “字体 图 形 ”。 举 个 例子 ， 
“家 ”这 个 汉字 Unicode 编码 是 5BB6， 这 个 5BB6 就 是 “门牌 号 ” 在 中 文字 体 中 ， 这 个 “门牌 
号 ”对 应 的 房间 里 面 的 画作 就 长 得 是 “家 ”这 个 肉眼 所 见 的 字符 形状 。 也 就 是 说 ， 一 个 字符 编 
码 对 应 一 个 形状 。 

好 ， 现 在 如 果 我 们 通过 一 定 的 手段 ， 把 挂 5BB6 这 个 “门牌 号 ”房间 
里 面 的 画作 改 成 一 个 房屋 的 形状 , 那 岂 不 是 使 用 这 个 字体 文件 的 时 候 ,“ 家 ?” 

就 不 是 “家 ”， 而 是 图 8-27 所 示 的 房子 了 呢 ? 

字体 图 标 技术 就 是 使 用 类 似 的 原理 实现 的 ， 即 把 通常 的 字符 映射 成 为 ”图 8-27 房子 图 形 
另外 的 图 标 形 状 ， 于 是 ， 虽 然 我 们 眼睛 看 到 的 是 个 图 标 ， 但 是 实际 上 它 本 质 上 就 是 一 个 普通 的 
字符 。 

回 到 我 们 上 面 的 示意 代码 : 

.jcon { 

font= Fan ly TOONS 
0 { 


content: '\1f3a4' 
} 


这 里 ，1f3a4 就 是 一 个 唯一 的 “门牌 号 ”在 通常 的 字体 下 ， 其 字符 展示 的 是 一 个 斜 的 麦克 风 ， 
如 图 8-28 所 示 , 但 是 , 在 ICON 这 个 字体 中 , 1f3a4 的 图 形 被 映射 成 了 一 个 正 立 的 麦克 风 图 形 ， 
最 后 的 显示 如 图 8-29 所 示 这 般 。 












































MN 
A 


图 8-28 ”原来 的 倾斜 麦克 风 图 形 图 8-29 ”上 自 定 义 字 体 下 正 并 的 妥 克 风 图 形 


知道 了 字体 图 标 技术 的 原理 ， 我 们 惑 能 很 好 地 理解 一 些 泻 染 现象 了 。 
(1) 因为 原始 字符 和 最 终 的 图 形 表 现 相差 很 大 ， 所 以 当 我 们 的 字体 文件 加 载 绥 慢 的 时 候 ， 
可 以 明显 看 到 字符 变 图 形 的 过 程 ， 这 种 加 载体 验 是 不 太 友好 的 ， 字 体内 联 在 CSS 文件 中 可 以 有 
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效 避 免 这 一 问题 ， 但 往往 字体 文件 体积 都 比较 大 ， 这 样 处 理 得 不 偿 失 。 据 我 所 知 ， 除 此 之 外 并 
没有 非常 好 的 解决 方法 。 

(2) 原始 的 字符 x-height 和 最 终 的 图 形 x-heignht 往往 是 不 一 样 的 ， 这 会 影 啊 内 联 元 
素 的 垂直 对 齐 ， 因 此 很 容易 出 现 页 面 高 度 闪 动情 况 ， 这 种 加 载体 验 也 是 不 友好 的 。 

(3) 原始 字符 的 ch 宽度 ， 也 就 是 水 平 占据 的 宽度 和 最 终 的 图 形 也 是 不 一 样 的 ， 因 此 很 容 
易 出 现 内 联 元 际 水 平方 向 晃动 的 问题 ， 这 种 加 载体 验 也 是 不 友好 的 ， 为 此 图 标 就 需要 设 定 有 具体 
宽度 值 ， 例 如 : 


-LON 并 





display: inline-block; 
width: 20px; 
text-align: center; 
font-family: ICON; 

} 


当然 也 能 很 好 地 享用 字符 的 一 些 特性 , 如 用 font-size 改变 尺寸 ,用 color 改变 颜色 ， 
用 text-shadow 增加 阴影 ， 以 及 用 writing-mode 实现 低 版 本 I 下 浏览 器 下 的 旋转 效果 ， 
他 他 

当 我 们 使 用 工具 生成 图 标 字 体 的 时 候 ， 无 论 是 在 线 工 具 还 是 本 地 工具 ， 其 中 间 的 媒介 
都 是 SVG 图标， 但 是 并 不 是 所 有 的 SVG 图 标 都 是 可 以 的 ， 根 据 我 的 经 验 ， 最 好 满足 下 面 

(1) 纯 路 径 ， 纯 天 量 ， 不 要 有 base64 内 联 图 形 。 

(2) 使 用 填充 而 非 搞 边 ， 也 尽量 避免 使 用 一 些 高 级 的 路 径 填 元 复 凋 技巧 。 

(3) 宽 高 矿 寸 最 好 都 大 于 200， 因 为 字体 生成 的 时 候 ， 坐 标 值 会 四 舍 五 人 ，SVG 尺寸 过 小 
会 导致 坐标 取 值 俩 差 较 大 ， 使 最 终 的 图 标 不 够 精致 。 

有 人 可 能 会 问 : 我 可 不 可 以 把 映射 字符 直接 写 在 页 面 中 , 而 不 是 放 在 :before 伪 元 素 中 ? 
也 就 是 不 需要 下 面 的 CSS 代码 : 

.icon-microphone:before { 


content: '\1f3a4' 
} 


而 是 直接 用 : 

<i class="icon">&#xlf3a4;</i> 

从 技术 实现 的 角度 来 讲 这 是 完全 可 以 的 , 而且 不 支持 伪 元 素 的 IE7 等 浏览 器 都 支持 这 样 
做 。 但 是 在 实际 开发 的 时 候 ， 我 并 不 建议 这 么 做 ， 有 两 点 原因 : 一 是 不 好 维护 ， 如 果 以 后 字 
符 上 映射 天 系 改变 ， 而 图 标 HTML 是 散布 在 各 个 页 面 中 的 ， 那 么 我 们 的 改动 束 会 很 肪 烦 ， 二 
是 从 语义 角度 考虑 ， 图 标 字 符 往 往 是 不 包含 任何 意义 的 ,应 该 没有 必要 让 搜索 引擎 知道 ， 也 
无 须 让 辅助 设备 读 取 ， 而 伪 元 素 恰 好 有 这 样 的 功能 ， 如 果 内 联 在 HTML 中 ， 则 反而 成 了 一 
种 干扰 。 
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8.6 文本 的 控制 


CSS 有 很 多 属性 专门 用 来 对 文本 进行 控制 ， 由 于 这 些 属性 的 作用 机 制 往往 古 基 于 内 联 金 检 
型 有 ， 因 此 对 于 内 联 块 状元 素 同 样 也 是 有 效果 的 ， 这 束 使 得 这 些 CSS 属性 作用 范围 更 三 了 ， 甚 
至 可 以 影 啊 布局 。 
8.6.1 text-indent 与 内 联 元 素 缩 进 


顾名思义 ， text-indent 砚 是 对 文本 进行 缩 进 控制 ， 其 设计 之 初 的 作用 应 该 是 实现 类 似 
图 8-30 所 示 的 缩 进 效果 。 














NS 在 学 识 方面 , 没有 人 能 胜 过 苟 寒食 ， 能 让 他 佩 














但 是 这 种 缩 进 对 内 容 要 求 比 较 高 ， 如 果 段 沙 失 0 
杂 类 文 、 数 字 或 者 图 厂 等 内 容 ， 缩 进 反 而 可 能 会 给 迟 坊 ”他 看 着 可 春 食 说 道 : “不 敢当 .。" 
人 以 参差 不 齐 的 感觉 , 加 上 现代 Web 形式 更 加 多 样 ， 习 “他 想起 惊 才 绝 艳 的 大 师兄 ， 想 到 这 场 婚事 , 况 
text-indent 在 实际 项 目 中 的 应 用 已 经 脱离 了 它 发 现 悄 无 声息 间 ， 自 己 对 师兄 的 信心 竟 有 些 动摇 。 


原本 的 设计 初衷 。 图 8-30 ” 缩 进 效果 示意 

首先 用 得 比较 多 的 是 text-indent 负 值 隐藏 文本 内 容 。 比 方 说 ， 很 多 网 站 的 标识 (logo) 
瓯 是 网 站 的 名 称 ， 从 SEO 的 角度 讲 ， 我 们 大 可 以 使 用 <hn1> 和 <n2> 这 种 级 别 的 标签 放置 我 们 的 
标识 ， 同 时 写 上 对 应 的 文字 内 容 。 例 如 : 


<hl class="loo00" ces 有 <z/h1> 
此 时 ， 我 们 就 可 以 使 用 text-indent 负 值 隐藏 这 里 的 文字 : 


.logo { 
width: 120px; 
background: url (logo.png); 
text-indent: -120px; 

} 


很 多 人 喜欢 设置 一 个 很 大 的 text-indent 负 值 ， 如 text-indent:-9999em， 我 是 不 

建议 这 么 做 的 。 自 先 ， 这样 做 在 某 些 设备 下 有 潜在 的 性 能 风险 ,体现 在 深 屏 的 时 候 会 发 生 卡 顿 ; 
其 次 ， 对 于 一 些 智 能 设备 的 屏幕 阅读 软件 ， 如 VoiceOver， 如 果 内 容 缩 进 在 屏幕 之 外 ， 它 是 不 会 

读 取 的 ， 这 样 束 降低 了 页 面 的 无 障碍 访问 能 

另外 ，text-indent 负 值 缩 进 在 部 分 浏览 器 # 下 会 影响 元 系 的 outline 区 域 ， 南 要 
再 设置 overflow:hidden。 

下 面 我 要 加 大 家 提 个 问题 : 如 采 单 看 最 终 的 CSS 样式 效果 ， 代 码 

.1ogo { 

width: 120px; 


text-indent: -120px; 
} 


是 全 等 同 于 
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.logo { 
width: 120px; 
text-indent: -100%， 
} 


答案 是 : 不 等 同 ， 而 且 有 着 本 质 上 的 差异 。 

text-indent 的 百分比 值 是 相对 于 当前 元 素 的 “包含 块 ” 计 算 的 ， 而 不 是 当前 元 素 。 由 
于 text-indent 最 终 作 用 的 是 当前 元 又 里 的 内 联 盒子 ， AR text-indent 
的 百分比 值 是 相对 于 当前 元 素 宽 上 度 计算 的 。 

眼见 为 实 , 手动 输入 http://demo.cssworld.cn/8/6-1.php 或 者 扫 下 面 的 二 维 码 。 结果 text-indent: 
-120px 乡 进 在 例子 之 外 ， 而 text-indent:-100% 早 已 缩 进 到 天 涯 海 角 ， 连 影子 都 看 不 到 ， 
如 图 8-31 所 示 。 














图 8-31 百分比 值 缩 进 计算 示意 














因此 ， 一 些 流传 很 广 的 text-indent 隐藏 文本 CSS 代码 片段 其 实 是 有 隐患 的 。 例 如 


.hide-text { 
text-indent: 100%; 
white-space: nowrap; 
overflow: hidden; 


} 
在 正常 情况 下 ， 确 实 可 以 隐藏 文字 ， 而 且 无 论 是 一 行 还 是 多 行者 可 以 非常 羔 容 地 隐藏 ， 因 为 一 
般 情 况 下 “包含 其 ”的 宽度 都 会 大 于 子 元 素 的 宽度 ,所 以 我 们 是 看 不 出 问题 来 的 。 但 是 一 旦 “ 包 
含 块 ”的 宽度 反而 小 了 ， 那 么 这 段 代 码 就 会 出 现 样 式 问 题 。 我 举 个 简单 的 例子 : 


<div style="position:absolute;"> 





< Class="hide-text™ style="nositiongabeaolutes "Ee/ p> 
/dl 


此 时 “坚挺 ”两 个 字 绝 对 是 纹 丝 不 动 ， 绝 对 定位 上 具有 包 囊 性 ， 而 子 元 素 也 是 绝对 定位 的 ， 
hide-text 所 在 元 素 的 “包含 块 ” 的 宽度 就 是 0， 此 时 text-indent:100$ 计 算 值 也 是 0， 
文本 缩 进 隐藏 彻底 失败 。 

关于 text-indent 的 百分比 值 ， 我 还 想 再 多 说 几 句 ， 那 束 是 text-ingdent 文 持 百分比 值 其 
实 算是 比较 “有 个 性 的 ” 因为 在 CSS 世界 中 ， 与 文本 控制 相关 的 CSS 属性 支持 百分比 值 的 并 不 多 ， 
例如 ，letter-spacing、word-spacing 和 text-shadow 等 都 不 支持 。 当 然 ， 随 看 CSS 的 发 
展 ， 以 后 可 能 会 文 持 ， 例 如 ，wordq-spacing 狐 章 采 增 加 了 白 分 比值 并 且 已 有 浏 虹 砷 开始 文 持 。 

那么 ，text-indent 百分比 值 还 有 没有 实际 价值 呢 ? 从 理论 上 讲 ， 我 们 可 以 使 用 text- 
indent 实现 宽度 已 知 内 联 元 素 的 大 中 效果 ， 例 如 : 
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.DOX { 
text-indent: 50%; 
} 
.box img { 
width: 256px; 
margin-left: -128px; 
} 
眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/8/6-2.php 或 者 扫 右 侧 的 二 维 人 码 加 ] T 
本 、 h rh 
感受 一 下 居中 效果 。 er 
但 是 ， 由 于 text-align 属性 的 存在 ， 这 种 大 中 小 技巧 平 单 使 用 的 机 
会 很 少 ， 除 非 是 text-align 不 能 设置 为 center 的 场景 。 
因此 说 来 说 去 ，text-indent 百分比 值 就 是 一 个 扶 不 起 的 阿斗 ， 还 是 国定 国 
的 长 度 值 用 得 更 多 。 比 如 ， 在 标签 受 限 的 情况 下 实现 一 些 特殊 的 布局 效果 ，CSS 和 HTML 代码 如 下 : 
















P { 
text-indent: -3em; 
padding-left: 3em; 
} 
<p> 提 问 : 问题 内 容 . . .</p> 
<p> 回 答 : 回答 内 容 . . .</p> 
<p> 提 问 : 问题 内 容 . . .</p> 
<p> 回 答 : 回答 内 容 . . .</p> 


结 采 ,“ 问 题 内 容 ” 和 “回答 内 容 ” 都 会 目 然 换 行 对 齐 ， 如 图 8-32 所 示 。 
另外 ，text-indent 还 有 一 个 比较 生僻 的 应 用 。 在 Chrome 浏览 器 下 ， 如 果 <img> 标 签 
没有 设置 src 属性 ， 则 会 出 现 一 个 灰色 的 线 框 ， 如 图 8-33 所 示 。 








你 旺 如 何 评价 text-indent 特 分 比值 的 ? 

;我 其 实 一 开始 星 对 text-indent 百 分 比值 抱 
有 很 大 期 望 的 ， 希 望 可 以 有 一 些 非常 屋 利 
的 应 用 ， 但 是 后 来 点 现 ， 要 么 有 缺陷 ， 要 
么 鸡肋 。 或 许 是 自己 千 握 的 还 不 够 吧 ! 


: text-indent 有 什么 其 他 特性 吗 ? 


text-indent 县 有 继 河 性 ， 因此， 级 别 较 高 
的 祖先 元 素 慎 用 ; 另外 ， 其 仪 对 第 一 行内 
联 元 素 有 效果 。 


图 8-32 text-align 与 纯 文本 对 齐 布局 效果 8-33 ”src 属性 缺失 时 候 出 现 的 边框 


根据 研究 我 发 现 ， 此 灰色 边框 是 预 留 给 alt 属性 值 用 的 ， 是 内 联 水 平 元 素 ， 因 此 可 以 使 用 
text-indent 属性 隐藏 之 ， 例 如 : 











img { 
text-indent: -400px; 
overflow: hidden; 


} 
无 src 的 <img> 本 质 上 就 是 一 个 普通 元 素 ， 因 此 ， 此 时 overflow:hidden 也 是 有 效 的 。 
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最 后 再 说 几 个 你 可 能 不 知道 的 小 知识 。 

(1) text-indent 仅 对 第 一 行内 联 盒子 内 容 有 效 。 

(2) 韭 僚 换 元 系 以 外 的 display 计算 值 为 inline 的 内 联 元 素 设置 text-indent 值 无 
效 ， 如 果 计 算 值 是 inLine-bLlock/inline-table 则 会 生效 。 因 此 ， 如 果 父 级 块 状 元 叉 设 置 
了 text-indent 属性 值 ， 子 inline-block/inline-table 需要 设置 text-indent:0 
重 置 。 

(3) <input> 标 签 按钮 text-indent 值 无 效 。 

(4) <button> 标 签 按钮 text-indent 值 有 效 ， 但 是 存在 兼容 性 差异 ，IE 浏览 器 理解 为 
单 标 签 ， 百 分 比值 按照 容器 计算 ， 而 Chrome 和 Firefox 浏览 器 标签 内 还 有 其 他 Shadow DOM 元 
素 ， 因 此 百分比 值 是 按照 自身 的 尺寸 计算 的 。 

(5)<input> 和 <textarea> 输 入 框 的 text-indent 在 低 厂 本 正 浏 览 器 下 有 兼容 问题 。 




















8.6.2 letter-spacing 与 字 侍 间距 


letter-spacing 可 以 用 来 控制 字符 之 间 的 间距 ， 这 里 说 的 “字符 ”包括 英文 字母 、 汉 
字 以 及 空格 等 。 例 如 : 
.It { 


letter-spacing: .Dem; 


lL 
表现 就 会 这 样 宽 松 : 

二 证 下 

letter-spocing 具有 以 下 一 些 特性 。 

(1) 继承 性 。 

(2) 默认 值 是 normal 而 不 是 0。 虽 然 说 正常 情况 下 ，normal 的 计算 值 束 是 0， 但 两 者 
还 是 有 差别 的 ， 在 有 些 场 景 下 ，letter-spacing 会 调整 normal 的 计算 值 以 实现 更 好 的 版 
面 布局 。 

(3) 文 持 负 值 ， 且 值 足够 大 的 时 候 ， 会 让 字符 形成 重 登 ， 甚 至 反 回 排列 〈 非 下 浏览 器 )。 
例如 : 


Rn we | 
letter-spacing: -2em; 


} 
此 时 在 非 正 浏览 磺 下 ， 下 面 的 HTML 从 左 往 右 呈 现 出 来 的 就 不 是 “一 二 三 四 五 ”， 而 是 “五 四 


233 
. 














一 一 
eh 


oe te A 


至 于 下 浏 览 匿 ， 最 多 只 能 完全 重 登 ， 无 法 反问 排列 。 
态 外 ， etter soacLngd 负 值 仪 能 让 字符 重 闭 ,但 是 不 能 让 替换 元 素 或 者 inline-pblock/ 
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inline-table 元 素 发 生 重 登 。 

(4) 和 text-indent 属性 一 样 ， 无 论 值 多 大 或 多 小 ， 第 一 行 一 定 会 保留 至 少 一 个 字符 。 
本 ee 2 生硬 和 @| 还 有 一 个 非常 有 意思 的 特性 就 是 ， 在 默认 的 左 对 齐 情 况 下 ， 无 论 值 如 何 设 
置 ， 第 一 个 字符 的 位 置 一 定 是 纹 丝 不 动 的 。 

(5) 文 持 小 数值 ， 即 使 0.1px 也 是 支持 的 ， 但 并 不 总 能 看 到 效果 ， 这 与 屏幕 的 密度 有 关 。 
对 普通 的 如 面 显 示 器 , 设备 像素 比 是 1， 最 小 泻 染 单位 是 1px， 因 此 ， 需 要 有 至少 连续 10 个 字符 ， 
才能 看 到 0 .1px 产生 的 1px 间距 变化 ， 如 果 是 9 个 字符 ， 则 不 会 有 效果 ， 这 很 可 能 会 让 人 误 
以 为 letter-spacing 不 支持 非常 小 的 数值 ， 实 际 上 是 支持 的 。 

(6) 暂 不 文 持 百分比 值 。 

在 实际 开发 的 时 候 ，Letter-spacing 除了 控制 文字 内 容 排 版 外 ， 还 可 以 修复 一 些 布局 
上 的 问题 。 例 如 ， 清 除 inline-block 列表 由 于 换行 人 符 或 者 空格 产生 的 空 晶 间 际 ， 使 我 们 的 
布局 控制 更 精准 : 

.box 1 

letter-spacing: -lem; 
} 
.list { 


letter-spacing: 0; 
} 


此 处 -lem 换 成 -100em 也 是 可 以 的 。 正 如 上 面 提 到 的 ，letter-spacing 的 值 再 小 也 不 
会 让 inline-block 列表 发 生 重 登 。 由 于 letter-spacing 具有 继承 性 , 为 了 不 影 啊 列 表 里 
面 字 符 内 容 的 排版 ， 我 们 可 以 使 用 letter-spacing:0 进行 重 置 ， 当 然 ， 亦 可 以 使 用 默认 值 
letter-spacing:normal 重 置 。 从 理论 上 讲 ， 后 一 种 重 置 更 稳妥 一 些 。 

由 于 letter-spacing 负 值 的 字体 重 登 特性 , 我 们 还 可 以 利用 该 属性 实现 一 些 文 本 动 效 ， 
核心 CSS 代码 如 下 : 

,EL 

animation: textIn 1s both; 


} 
Gkeyframes textIn { 
0% { 
letter-spacing: -200px; 
} 
100% { 
letter-spacing: 0; 
} 
} 


这 样 束 可 以 有 文字 依次 飞 入 的 效果 了 ， 如 图 8-34 所 示 。 
需要 注意 的 是 ， 由 于 下 浏览 器 的 letter-spacing 负 值 
不 会 有 反 回 排列 效果 ， 因 此 ， 此 技术 目前 只 适合 移动 端 这 类 无 



































一 


须 关 心 正 浏览 器 的 项 目 。 图 8-34 ”字符 动 效 分 步 示 意 
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如 果 想 杀 目 感受 效果 , 手动 输入 http://demo.cssworld.cn/8/6-4.php 或 者 扫 [a] 
右 侧 的 二 维 码 。 
提示 : 点 击 文 字 内 容 ， 动 画 会 重新 泻 染 。 


8.6.3 word-spacing 与 单词 间距 


word-spacing 和 letter-spacing 名 称 类 似 ， 其 特性 也 有 很 多 共通 之 处 : 

(1) 都 具有 继承 性 。 

(2) 默认 值 都 是 normal 而 不 是 0。 通 闸 情 况 下 ， 两 者 表现 并 无 闫 异 。 

(3) 都 文 持 负 值 ， 都 可 以 让 字符 重 登 ， 但 是 对 于 ijnline-pblock 和 ijnline-table 元 素 
却 存在 兼容 性 差异 ，Chrome 浏览 左下 可 以 重 登 ，IE 和 Firefox 浏览 左下 则 再 大 的 负 值 也 不 会 重 
营 ， 因 此 不 适合 使 用 word-spacing 来 清除 空白 间 际 。 

(4) 都 支持 小 数值 ， 如 word-spacing:0.5px。 

(5) 在 目前 的 CSS2.1 规范 中 ， 并 不 文 持 自分 比值 ， 但 新 的 草案 中 新 增 了 对 百 分 值 的 文 持 ， 
是 根据 相对 于 字符 的 “ 步 进 宽度 ”(advance width ) 计算 的 。 这 属于 新 世界 内 容 ， 本 书 不 做 介绍 。 

(6) 间隔 算法 都 会 受到 text-align:justify 两 端 对 齐 的 影 啊 。 

当然 也 有 差异 。letter-spacing 作用 于 所 有 字符 , 但 word-spacing 仅 作 用 于 空格 字 
和 从。 注意, 是 作用 在 “空格 ”上 , 而 不 是 字面 意义 上 的 “单词 ”例如 , 假设 有 以 下 CSS 和 HTML: 

.wp 1 

word-spacing: 20px; 


} 
<p class="wp"> 我 1ove 前 端 ! </p> 


love 虽然 是 一 个 单词 ， 但 没有 空格 ， 那 么 很 抱歉 ，word-spacing 无 效 。 
换 句 话说 , word-spacing 的 作用 就 是 增加 空格 的 间 隐 宽度 。 有 空格 就 有 效 , 可 以 是 Space 
键 玖 出 来 的 空格 (U+0020)， 也 可 以 是 换行 符 产 生 的 空格 (浏览 器 解析 为 U+0020)， 还 可 以 是 
Tab 键 痪 出 来 的 空格 (U+0009)， 抑 或 是 enpsp; 非 换行 空格 (U+00A0)。 例 如 : 
<p class="wp"> 我 有 空 格 ， 我 .….</p> 
此 时 ,“ 空 ”和 和“ 格 ” 两 个 字 中 间 的 间 隐 融 是 原本 的 空格 宽度 fwordq-spacing 设置 的 20px， 
如 图 8-35 所 示 ， 但 不 包括 零 宽 空格 (U+200B、U+200C、U+200D)、 固 宽 空 格 (全 角 U+3000、 
半角 U2000 U42002) 以 及 罕 宰 格 “0F 我 有 到 棉 ， 我 …… 
另外 ， 相 命名 下，%0Ld-86acine 之 所 以 称 为 图 8-35 word-spacing 作用 效果 示意 
word-spacing 而 不 是 blank-spacing 之 类 的 ,主要 原因 是 此 属性 当初 主要 为 英文 类 排版 设计 ， 
而 英文 单词 和 单词 之 间 是 以 空格 分 隔 的 ， 要 想 控制 单词 之 间 的 间距 ， 自 然 就 向 “空格 ”开刀 了 。 
word-spacing 作用 于 空格 的 特性 可 以 让 我 们 使 用 一 些 简 单 的 方式 进行 一 些 布 局 控制 。 例 
如 ， 弹 框 底部 有 时 候 是 一 个 “确认 ”按钮 ， 有 时 候 “ 确 认 ” 和 “取消 ”按钮 同时 存在 ， 而 且 按 
钮 有 时 候 居 中 对 齐 ， 有 了 时候 居 右 对 齐 ， 请 问 : 如 何 设置 CSS， 让 多 按钮 的 时 候 中 间 上 自动 有 合适 
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的 间距 呢 ? 
如 果 按 钮 仅仅 是 大 中 对 章 ， 我 们 可 以 写 : 


button { 
margin: 0 10px; 
} 


但 这 里 要 同时 满足 大 中 对 齐 和 大 右 对 章 ， 束 需要 采用 列 的 方法 了 。 一 种 方法 束 是 使 用 word- 


spacing: 





.box { 
word-spacing: 20px; 
. 
两 个 按钮 距离 自动 分 开 。 在 IE6 时 代 ， 这 确实 是 个 非常 好 的 方法 ， 但 如 今 下 面 的 做 法 可 能 要 更 


合适 些 ; 











button + button f{ 
margin-left: 20px; 
} 


与 word-spacing 相 比 ,这 样 做 的 优势 在 于 , 如 果 两 个 <button> 标 签 之 间 没 有 空格 或 者 换行 ， 
样式 依然 有 效 。 
8.6.4 了 解 word-break 和 word-wrap 的 区 别 


准确 来 讲 ， 本 节 内 容 应 该 是 “了 人 解 word-break:break-all 和 word-wrap:break- 
word 的 区 别 ” 但 这 样 太 长 了 ， 所 以 标题 只 露出 了 属性 值 。 
首先 了 解 一 下 word-pbreak 属性 ， 语 法 如 下 : 


word-break: normal; 





word-break: break-all; 
word-break: keep-all; 


其 中 的 几 个 关键 字 值 的 含义 具体 解释 如 下 。 

。 normal: 使 用 默认 的 换行 规则 。 

e。 break-all: 人 允许 任意 非 CJK (Chinese/Japanese/Korean) 文本 间 的 单词 断 行 。 

。 keep-all: 不 允许 CJK 文本 中 的 单词 换行 , 只 能 在 半角 空格 或 连 字 符 处 换行 。 非 CJK 

文本 的 行为 实际 上 和 normal 一 致 。 

break-all 这 个 值 所 有 浏览 器 都 支持 ， 但 是 keep-all 就 不 这 样 了 ， 虽 然 有 一 定 的 发 展 
和 进步 ， 但 目前 移动 病人 还 不 适合 使 用 wordq-break:keep-al1l。 

另外 ，Chrome、Safari 以 及 其 他 WebKit 或 Blink 浏览 器 还 支持 非 官 方 标 准 的 break-word 
值 ， 其 表现 就 和 word-wrap:break-word 一样 ， 这 个 知识 了 解 一 下 即 可 。 

现在 轮 到 另外 一 个 主角 上 ED 声 本 攻 价 去 如 下 : 


word-wrap: normal; 
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word-wrap: break-word; 


其 中 的 几 个 关键 字 值 的 含义 具体 解释 如 下 。 

。 normal: 永 是 大 家 平 第 见得 最 多 的 正常 的 换行 规则 。 

。 preak-word: 一 行 单词 中 实在 没有 其 他 靠 谱 的 换行 点 的 时 候 换 行 。 

word-wrap 属性 其 实 也 是 很 有 故事 的 ， 它 之 前 由 于 和 word-break 长 得 太 像 ， 难 免 会 让 
人 记 不 住 或 搞 混 ， 于 是 在 CSS3 规范 里 ， 这 个 属性 的 名 称 被 修改 了 ， 叫 作 overflow-wrap。 
这 个 新 属性 名 称 显然 语义 更 准确 , 也 更 容易 区 别 和 记忆 。 但 是 , 也 残 Chrome 和 Safari 等 WebKit 
或 Blink 浏览 髓 文 持 这 个 新 属性 。 因 此 ， 虽 然 换 了 个 好 看 好 用 的 新 名 字 ， 为 了 兼容 性 ， 目 前 还 
是 乖 午 地 使 用 word-wrap 吧 。 

下 面 回 到 重点 : wordq-preak:break-all 和 word-wrap:break-word。 首 先 ， 两 者 
长 相 神 似 ， 都 有 word， 都 有 break， 位 置 都 还 一 样 ， 一 个 有 两 个 break， 一 个 有 两 个 wordi 
其 次 ， 两 者 的 功能 作用 也 类 似 ， 这 两 个 声明 都 能 使 连续 喘 文 字符 换行 ， 那 么 它们 的 区 列 到 底 是 
什么 ? 

那 两 者 的 区 别 是 什么 呢 ? 

用 实例 说 话 ， 手 动 输入 http://demo.cssworld.cn/8/6-5.php 或 者 扫 下 面 的 二 维 码 。 对 比 效果 如 
图 8-36 所 示 。 

















word-break:break-all 
如 果 您 在 阅读 过 程 中 有 任何 疑问 或 者 发 现 表 述 不 
严 雍 的 地 方 ， 欢 迎 去 官方 论坛 http://bbs.csswor 
Id.cn 进 行 反 馈 与 交流 .。 


-3 
word-wrap: break-word; 2 了 白 


如 时 您 在 阅读 过 程 中 有 任何 疑问 或 者 此 现 替 述 不 
严 堵 的 地 方 ， 欢 迎 去 官方 论坛 
http://bbs.cssworld.cn 进 行 反 蚀 与 交流 。 





图 8-36 word-break:break-all 和 word-wrap:break-word 效果 区 别 

顾名思义 ，worgd-break:break-all 的 作用 是 所 有 的 都 换行 ， 坚 不 留情 ,一 点 儿 空 
隙 都 不 放 过 ， 而 word-wrap:break-word 则 市 有 怜 例 之 心 ， 如 果 这 一 行文 字 有 可 以 换 
行 的 点 ， 如 空格 或 CJK 〈 中 文 / 日 文 / 娠 文 ) 之 类 的 ， 束 不 打 英 文 单词 或 字符 的 主意 了 ， 在 
这 些 换行 点 换行 ， 至 于 对 不 对 齐 、 好 不 好 看 则 不 关心 ， 因 此 ， 很 容易 出 现 一 片 一 片 空 日 区 
域 的 情况 。 

这 束 是 这 两 个 声明 的 区 别 所 在 。 
8.6.5 white-space 与 换行 和 空格 的 控制 

1. white-space 的 处 理 模 型 

white-space 属性 声明 了 如 何 处 理 元 素 内 的 空 日 字符 ， 这 类 空 日 字符 包括 Space (空格 ) 


键 、Enter〈 回 车 ) 键 、Tab 〈 制 表 符 ) 键 产 生 的 空白 。 因 此 ，white-space 可 以 决定 图 文 内 容 
是 否 在 一 行 显 示 《〈 回 车 空格 是 否 生效 )， 是 否 显示 大 段 连续 空白 《空格 是 否 生效 ) 等 。 
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其 属性 值 包括 下 面 这 些 。 

。 normal: 合并 衬 日 字符 和 换行 符 。 

。 pre: 空白 字符 不 合并 ， 并 且 内 容 只 在 有 换行 符 的 地 方 换行 。 

。 nowrap: 该 值 和 normal 一 样 会 合并 空白 字符 ， 但 不 允许 文本 环 统 

。 pre-wrap: 空白 字符 不 合并 , 并且 内 容 只 在 有 换行 符 的 地 方 换行 ， 同时 允许 文本 环绕 。 

。 pre-line: 合并 空白 字符 ， 但 只 在 有 换行 符 的 地 方 换 行 ， 允 许 文 本 环 统 。 

从 上 面 的 解释 我 们 可 以 看 出 ，white-space 的 功能 分 3 个 维度 ， 分 别 是 : 是 否 合并 空白 
字符 ， 是 否 合并 换行 符 ， 以 及 文本 是 否 自动 换行 。 于 是 我 们 就 可 以 得 到 一 个 更 加 直观 的 功能 
如 表 8-2 所 示 。 

















表 8-2 white-space 不 同属 性 值 功能 示意 


属性 本 空格 和 制 表 文本 环绕 


arm A 和 
nowrap 合并 合并 不 环绕 
pre 保留 保留 不 环绕 
pre-wrap 保留 


印 环线 
pre-line 环线 
如 果 合 并 空格 ， 会 让 多 个 空格 变 成 1 个 ， 也 就 是 我 们 平常 看 到 的 效果 ， 10 个 空格 ， 结 果 页 
面 束 1 个 空格 。 如 果 合并 换行 ， 会 把 多 个 连续 换行 合并 成 1 个 ， 并 当 作 1 个 普通 空格 处 理 ， 就 是 键盘 
空格 键 歼 出 来 的 那个 空格 。 如 果 文本 环绕 , 一 行文 字 内 容 超 出 容器 宽度 时 , 会 自动 从 下 一 行 开 始 显示 。 
有 两 个 属性 值 pre-wrap 和 pre-line 是 从 IE8 开始 支持 的 。 J 
Mi 网 站 技术 文章 的 代码 块 显示 区 域 常 汕 会 出 现 一 个 长 长 的 水 平 深 动 条 ， 其 实 这 样 体 
ue 那 为 何 还 要 这 样 设 置 呢 ? 
这 其 实 是 一 个 历史 遗留 问题 ， 以 前 做 网 站 是 需要 兼容 IE6 和 IE7 浏览 器 的 ， 而 这 两 个 浏览 
器 只 支持 white-space:pre， 而 white-space:pre 的 文本 是 不 环绕 的 ， 也 就 是 说 源 代码 
如 果 没 有 换行 的 话 ， 它 会 一 行 显示 到 后 ， 不 得 已 只 能 弄 个 水 平 深 动 条 。 但 是 如 今 ， 显 然 设置 
white-space:pre-wrap 显示 代码 片段 要 更 合适 些 。 
2. white-space 与 最 大 可 用 宽度 
当 white-space 设置 为 nowrap 的 时 候 ， 元 素 的 宽度 此 时 表现 为 “最 大 可 用 宽度 ” 换 
行 符 和 一 些 空格 全 部 合并 ， 文 本 一 行 显示 。 
在 实际 Web 开发 的 时 候 , white-space 的 应 用 非常 广泛 ,下面 举 副 
几 个 例子 。 
(1)“ 包 含 块 ” 尺寸 过 小 处 理 。 绝 对 定位 以 及 inline-block 元 素 
人 当 文 本 内 容 宽度 超过 包含 块 宽度 的 时 候 ， 束 会 发 生 文本 图 8-37 被 “包含 块 ” 
绕 现象 。 还 记 不 记得 之 前 遇 到 过 的 “一 柱 擎 天 ”的 例子 ( 见 图 8-37) ? ”限制 的 一 柱 党 天 效 林 
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可 以 对 其 使 用 white-space:nowrap 声明 让 其 如 预期 的 那样 一 行 显示 。 

(2 ) 单行 文字 溢出 点 点 点 效果 。text-overflow:ellipsis 文字 内 容 超 出 打点 效果 离 不 
开 white-space:nowrap 声明 。 

(3) 水 平 列 表 切 换 效 果 。 水 平 列表 切换 是 网 页 中 常见 的 交互 效果 ， 如 果 列 表 的 数目 是 不 
固定 的 ， 使 用 whnite-space:nowrap 使 列表 一 行 显示 会 是 个 非常 不 错 的 处 理 。CSS 示意 代 
码 如 下 : 

.box 1{ 

width: 300px; 


overflow: hidden; 
} 
.box > ul ({ 
position: absolute; 
white-space: nowrap; 
} 
.box > ul > 1i 1 
display: inline-block; 
} 


使 用 white-space:nowrap 而 不 是 使 用 一 个 绝对 安全 的 固定 宽度 值 [| 
的 好 处 在 于 没有 多 余 的 空间 浪费 , 同时 通过 一 行 简单 的 pox .clLientWidth rd 全 
- box.scrollWidth 代码 就 可 以 知道 最 大 的 深 动 宽度 。 

天 于 此 应 用 ， 我 专门 做 了 演示 页 面 ， 手 动 输入 http://demo.cssworld.cn/ 
8/6-6.php 或 者 扫 右 侧 的 三 维 人 码 。 


8.6.6 text-align 与 元 素 对 齐 


种 见 的 左 中 右 对 齐 没 什么 好 说 的 ， 这 里 只 讲 一 下 text-align:justify 两 内 对 齐 。 

因为 CSS 是 母语 为 英语 的 人 发 明 的 ， 所 以 在 早期 的 时 候 ， 对 中 文 或 其 他 东亚 语言 并 没有 考 
虑 得 那么 细致 ， 从 text-align:justify 的 表现 上 束 可 以 才 见 一 斑 。 例 如 ， 正 浏览 器 〈 至 少 
到 IE11) 到 目前 为 止 使 用 text-align:justify 都 无 法 让 中 文 两 端 对 齐 , 而 Chrome、Firefox 
和 Safari 等 浏览 器 都 是 可 以 的 。 

就 最 终 的 泻 染 表现 来 看 ，Chrome 等 浏览 器 应 该 对 文本 内 容 进 行 了 算法 区 分 ， 对 CJK 文本 
使 用 了 letter-spacing 间隔 算法 ， 而 对 非 CJK 文本 使 用 的 是 word-spacing 间隔 算法 ， 
但 IE 浏览 器 则 束 一 个 word-spacing 间隔 算法 。 于 是 瓯 会 出 现 明 明 左 右 padding 大 小 设置 



























一 样 > 全 果 厂 侧 罕 白 明 显 更 大 的 乾 界 问 是 O 例 如 。 这 旺 一 段 临 时 起 出 来 的 文案 : 其 中 oJ 能 参 
杂 了 几 个 英文 单词 ， 例 如 Cs3， 例 如 小 
.Content { 等 . 


padding: 1l10px 20px; 
| 图 8-38 左右 padqing 设置 大 小 
A = 四 实际 留 ES 示意 
可 能 最 后 的 效果 如 图 8-38 所 示 。 致 实际 留 白 不 一 致 示意 
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不 过 ， 好 在 IE 有 一 个 私有 的 CSS 属性 text-justify (目前 也 写 入 规范 草案 了 ) 可 以 实 
现 中 文 两 端 对 齐 的 。 于 是 ， 通 过 使 用 下 面 的 CSS 代码 组 合 就 可 以 实现 全 部 浏览 器 都 兼容 的 中 文 
两 端 对 齐 效 果 : 


.Justify { 





text-align: justify; 
text-justify: inter-ideograph; 
} 


其 中 ， 属 性 值 inter-ideograph 的 字面 意思 是 “国际 象形 文字 ”， 非 官方 非 标 准 ， 可 以 放心 
使 用 ， 不 用 担心 以 后 其 他 浏览 器 也 文 持 之 后 出 现 新 旧 演 染 不 一 致 的 问题 。 

眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/8/6-7.php 或 者 扫 下 面 的 二 维 码 。 实 例 页面 对 
比 效果 如 图 8-39 所 示 。 








居 左 对 齐 


这 是 一 段 临 时 想 出 来 的 文案 ， 其 中 可 能 参 
杂 了 几 个 英文 单词 ， 例 如 CSS， 例如 上 
等 。 


两 端 对 齐 


这 是 一 段 临 时 想 出 来 的 文案 ， 其 中 可 能 癸 
杂 了 几 个 英文 单词 ， 例 如 CSS， 例 如 JS 
等 。 





图 8-39 下 浏览 右 的 中 文 两 端 对 齐 效果 
text-align:justify 除了 实现 文本 的 两 端 对 齐 , 还 可 以 实现 容错 性 更 强 的 两 端 对 齐 布局 效果 。 
我 们 先 从 简单 的 一 行 排列 说 起 。 例 如 ， 要 实现 如 图 8-40 所 示 的 效果 。 

HTML 结构 如 下 : 





<ul class="justify"> 
< 了 工 > 
<img src="1.jpg"> 
<p> 图 标 描述 1</p> 
</1i> 
<11i> 
<img src="1.jpg"> 
<p> 图 标 描述 2</p> 
< Li 
< UL 


我 们 可 以 让 <1i> 列 表 ijnline-block 化 ， 然 后 text-align:justify 一 步 到 位 即 可 实 
现 两 端 对 齐 效 果 了 ! 例如 : 


.Justify { 
text-align: Justify; 
} 
.Justify 1i { 
display: inline-block; 
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text-align: center; 


} 
结果 却 不 是 想 象 的 那样 ， 而 是 依旧 左 侧 排 列 ， 如 图 8-41 所 示 。 为 什么 会 这 样 呢 ? 


图 标 撞 述 1 图 标 摘 述 2 图 标 摘 述 1 图 标 措 述 2 

图 8-40 ”简单 的 单行 两 端 对 齐 布局 效果 图 8-41 设置 text-align:justify 依然 左 对 齐 

那 是 因为 不 足 一 行 。 在 默认 设置 下 ， text=allgn: Tustify 要 想 有 两 内 对 齐 的 效果 ， 需 
要 满足 两 点 : 一 是 有 分 隔 点 ， 如 空格 ; 二 和 是 要 超过 一 行 ， 此 时 非 最 后 一 行内 容 会 两 病 对 齐 。 

上 面 的 例子 满足 了 第 一 点 ，<1Li1> 标 俭 中 间 有 换行 待 ， 在 默认 white-space 属性 下 会 转 
换 成 普通 空格 ， 但 是 并 不 满足 第 二 后 ， 内 容 并 没有 超过 一 行 。 这 就 难 办 了 ， 我 们 的 内 容 是 固 害 
的 ， 不 可 能 再 加 一 个 列表 ， 就 没有 什么 好 方法 了 吗 ? 

CSS 世界 中 有 一 个 text-align-last 属性 ， 可 以 规定 最 后 一 行内 联 内 容 的 排列 方式 ， 

这 是 从 下 浏览 器 过 来 的 。 例 如 : 


.Justify { 














text-align-last: justify; 
} 


相当 于 把 第 二 点 要 求 直 接 给 否决 了 ， 就 是 “最 后 一 行 的 对 齐 就 是 两 端 对 齐 ”! 

好 一 个 及 时 雨 ! 然而 可 惜 ，Safari 浏览 器 ， 包 括 Safari 10， 都 不 支持 ， 以 至 于 移动 端 和 于 
面 痪 都 不 能 使 用 ， 甚 是 遗憾 。 

于 是 ， 我 们 只 能 寻求 更 加 极 客 一 点 的 技术 手段 ， 比 方 说， 借助 伪 元 又 自动 补 一 行 。 例 如 : 


.Justify { 





Dext LLOn THCLEY; 
} 
.Justify:after { 
Content: ™",} 
display: inline-table; /* 也 可 以 是 inline-block */ 
width: 100%; 
} 
这 相当 于 强制 创建 一 个 “看 不 见 ” 的 元 素 ， 满 足 换行 这 
个 要 求 ， 实 现 第 一 行 的 两 端 对 齐 效果 。 从 效果 上 看 ， 确 
实 两 端 对 齐 了 , 然而, 列表 下 方 似乎 真名 多 了 一 些 高 度 ， 
如 图 8-42 所 示 。 于 标 洗 述 1 图 标 搓 述 2 
关于 这 个 莫名 高 度 如 何 产 生 可 以 参见 4.3 市 ， 其 中 
也 提供 了 修正 手段 ， 分 为 两 点 : 一 是 容器 设置 font- 图 8-42 两 端 对 齐 ， 但 底部 有 英名 两 度 
size:0, 列表 font-size 再 还 原 ; 二 是 辅助 两 端 对 齐 的 内 联 元 素 设 置 vertical-align:top 
或 vertical-align:bottom。 例 如 : 
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.Justify { 
text-align: Justify; 
font-size: 0; 

} 

.Justify:after { 
content: ™",;} 
display: inline-table; 
width: 100%; 
vertical-align: bottom; 

} 

.Justify 1i { 
display: inline-block; 
font-size: 14px; 


} 


理论 很 完美 ,现实 很 残酷 。 在 正 浏览 右 下 ， 如 果 font-size 设 为 0， 其 样式 表现 就 好 像 空 
格 根本 不 存在 一 样 ， 无 法 两 端 对 齐 。 是 不 是 再 次 失望 了 ? 后 来 ， 我 经 过 尝试 发 现 ， 我 们 可 以 设置 
font-size: .1px, 设置 字号 0.1 像素 , 下 浏览 器 又 认为 空格 存在 了 , 同时 间 际 什么 的 都 没有 了 ， 
美 哉 ! 然而 ，Chrome 浏览 器 昌 面 浏览 器 有 一 个 最 小 2 的 font-size 限制 ， 设 置 字 与 0.1 像 
素 等 同 于 设置 字号 12px， 此 时 Chrome 浏览 器 间隙 问题 又 出 现 了 ! 是 不 是 彻底 绝望 了 ? 

于 是 ， 我 不 得 已 使 用 了 下 面 这 种 比较 极 客 的 方法 进行 处 理 : 


.Justify { 

















text-align: Justify; 

font-size: .lpx; 

font-size: ~webkit-calc(O0px + Opx); 
} 


于 是 ， 丝 大 欢喜 。 上 面 的 font-size 处 理 就 是 莫名 高 度 修 复 的 关键 技巧 所 在 。 
关于 上 面 的 两 端 对 齐 案 例 ， 可 以 手动 输入 http://demo.cssworld.cn/8/ 加 T 
6-8.php 或 者 扫 右 侧 的 二 维 码 进行 体验 。 Er 
另外 多 说 一 句 ， 如果 Line-height 设置 的 是 固定 值 , 如 line-height: 
20px， 则 容器 需要 同步 设置 1ine-height:0 或 者 改 为 相对 计算 的 值 。 
下 面 有 另外 一 个 问题 ， 台 是 我 们 的 列表 排版 不 可 能 总 是 只 有 1 行 ， 也 不 回 
可 能 只 有 2 列 ， 如 有 果 还 是 使 用 上 面 的 伪 元 素 填 充 法 ， 可 能 就 会 出 现 图 8-43 所 示 的 布局 。 


























图 标 描述 1 图 标 描述 1 图 标 摘 述 2 





图 标 撞 述 2 图 标 摘 述 1 


图 8-43 ”最 后 一 行 尴 粹 地 两 端 对 齐 
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这 显然 不 是 我 们 想 要 的 效果 ， 我 们 是 希望 最 后 一 个 列表 跟 在 后 面 ， 而 不 是 跑 到 最 右边 。 遇 
到 这 种 情况 ， 我 们 可 以 使 用 辅助 列表 占 位 来 实现 想 要 的 效果 ，HTML 代码 如 下 : 





<ul class="justify"> 


TiS<imo Sre= "1 BI"S<PS 述 1</p><71i 
11><img Sreo="3, JBd"S<B> 描 述 . 3<yB3<7y1i 


9 

Ty<inic See="2. TB> 挡 述 全 < 
9 
g src="4.jpg"><p> 描 述 4</p></1i 


1i><im 





V V VvV VvV YYV 








1SKimdg Sre="5 .B90"><p> 必 述 5</p></14 
li class="placeholder"></1i> 
li class="placeholder"></1i> 








li class="placeholder"></1i> 
/> 


最 后 3 个 类 名 为 placeholder 的 <11> 标 俭 就 是 布局 辅助 元 素 。 假 设 我 们 列表 宽度 是 128px， 
则 如 下 设置 即 可 : 








.Placeholder { 
display: inline-block; 
width: 128px; 
vertical-align: bottom; 


} 


其 作用 和 使 用 伪 元 素 创 建 一 个 宽度 100$ 的 内 联 块 级 元 素 是 一 样 的 ， 也 同样 会 存在 有 和 额外 高 度 
问题 ， 处 理 方法 一 模 一 样 ， 不 再 著述 。 最 后 补充 几 点 。 

(1) 关于 占 位 标签 的 个 数 。 占 位 标签 的 个 数 和 列表 的 列 数 保持 一 样 就 可 以 了 ，100% 实 现 符 
合 预 期 的 布局 效果 ， 多 了 浪费 ， 少 了 不 行 。 

(2) 关于 使 用 空 标签 心理 障碍 。 有 人 对 代码 有 洁 六 ,原本 规整 的 列表 最 后 加 几 个 空 标签 ， 
心里 难受 。 这 种 心理 往往 出 现在 新 人 有 身上 ， 本 质 上 是 因为 关注 点 是 代码 自身 ， 而 不 是 产品 、 同 
事 或 公司 更 高 层面 的 东西 。 于 是 ， 当 产品 经 理 提 需 求 时 ， 他 们 想到 的 是 我 的 代码 如 何如 何 ， 而 
不 是 产品 收益 如 何如 何 。 毕 竟 我 们 是 职场 人 ， 很 显然 ， 创 造 收益 和 价值 的 意识 要 远 比 代码 洁 闻 
心理 对 职业 生涯 发 展 帮 助 更 大 。 回 到 我 们 这 里 ,代码 排版 确实 不 美 了 ,但 是 功能 很 好 地 实现 了 ， 
且 非 常 健壮 ， 容 错 性 强 ， 而 且 对 SEO 没有 任何 干扰 ， 对 辅助 设备 访问 也 没有 任何 干扰 ， 百 荔 无 
一 害 ， 有 什么 好 难受 的 呢 ! 


8.6.7 ”如 何 解 决 text-decoration 下 划 线 和 文本 重 倒 的 问题 


CSS 的 text-decoration:underline 可 以 给 内 联 文本 增加 下 划 线 ， 但 是 ， 如 果 对 细 
节 要 求 较 高 ， 就 会 发 现 ， 下 划 线 经 常会 和 中 文 文字 的 下 边缘 粘连 在 一 起 (如 图 8-44 所 示 )， 英 
文 的 话 甚至 直接 罕 过 ， 越 看 越 有 心痛 的 感觉。 

图 8-44 中 几 个 中 文字 下 边缘 正好 都 是 横 线 ， 绪 果 可 以 看 到 ,文字 下 边缘 和 下 划 线 基本 上 合 
在 一 起 ， 分 不 清 谁 是 谁 了 ， 换 成 微软 雅 黑 字体 则 似乎 变本加厉 了 ， 如 图 8-45 所 示 。 
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图 8-44 下 划 线 和 文字 合 在 一 起 图 8-45 ”采用 微软 雅 黑 字 体 时 文字 和 下 划 线 重 登 
有 没有 什么 办 法 让 下 划 线 不 要 靠 得 这 么 近 ， 或 者 文字 可 以 完整 、 清 晰 地 显示 呢 ? 有 。 方 法 
很 多 ， 例 如 ， 浏 览 器 支持 并 不 好 的 text-decoration-skip 属性 、CSS3 box-shadorw 或 者 
background-image 模拟 ,甚至 可 以 走 canvas 和 SVG 滤 镜 。 然 而 ， 这 些 看 上 去 很 历 害 的 技巧 
其 实 华而不实 。 转 一 圈 后 你 会 发 现 ， 最 好 的 处 理 方法 就 是 使 用 看 似 普 通 却 功勋 时 越 的 border 
属性 。 例 如 : 


a { 











text-decoration: none,; 
border-bottom: lpx solid; 
} 


效果 如 图 8-46 所 示 。 

有 人 可 能 会 担心 : 这 里 增加 了 下 边框 ， 会 不 会 增加 高 度 、 影 响 水 平 对 齐 呢 ? 完全 不 用 担心 ， 
对 于 纯 内 联 元 素 ， 垂 直方 向 的 padding 属性 和 borqder 属性 对 原来 的 布局 定位 等 没有 任何 影 
啊 。 也 就 是 说 , 就 算 border-bottom 宽度 设 为 100px, 上 下 行文 字 的 垂直 位 置 依旧 纹 丝 不 动 。 
再 加 上 border 兼容 性 很 好 ,天然 使 用 color 颜色 作为 边框 色 , 可 谓 下 划 线 重 车 问题 解决 办 法 
的 不 二 之 选 。 男 外 ， 配 合 padding， 我 们 就 可 以 很 有 效 地 调节 下 边框 和 文字 下 边缘 的 距离 ， 实 
现 我 们 最 想 要 的 效果 。 使 用 类 似 下 面 的 CSS 代码 : 


a { 




















text-decoration: none; 
border-bottom: lpx solid; 
padding-bottom: Spx; 

} 


效果 如 图 8-47 所 示 。 





& 文 字 ， 链 接地 址 出 现下 划 线 。 





我 是 一 段 义 字 ， 链 接地 址 出 现下 划 线 。 


图 8-46 下 边框 模拟 的 下 划 线 8-47 padding border 配合 的 下 划 线 效果 


另外 ， 使 用 bordqer-bottom 模拟 下 划 线 的 时 候 ，borqer-color 最 好 省 略 ， 这 样 就 会 
使 用 文字 的 color 颜色 作为 边框 色 ， 鼠 标 nover 的 时 候 ， 下 划 线 会 自动 和 文字 一 起 变色 ， 效 
果 如 图 8-48 所 示 。 

使 用 border-bottom 模拟 的 另外 一 个 好 处 就 是 ， 我 们 还 可 以 使 用 虚线 或 者 点 线 下 划 线 ， 
如 图 8-49 所 示 。 





我 是 一 段 久 字 ， 链 接地 址 出 现下 划 线 。 
二 世 


> 日 


AE 





8-48 ”border 模拟 下 划 线 , nover 凑 色 跟着 变化 效果 图 8-49 bordgder 模拟 下 划 线 使 用 点 线 下 划 线 效果 
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text-decoration 除了 文 持 下 划 线 underline， 还 支持 上 划 线 overline 和 中 划 线 
line-through。 其 中 ， 上 划 线 我 没有 在 实际 项 目 中 有 使 用 过 ,但 是 中 划 线 却 比较 常见 ， 用 来 
表示 “删除 ” <dqe1> 标 签 默认 的 text-decoration 的 属性 值 束 是 Line-through， 因 此 类 
似 原价 删除 效果 ， 如 图 8-50 所 示 。 直 接 价格 外 面 套 一 个 <qae1> 标 签 即 可 ， 既 样式 天 然 ， 又 易于 
草丛 ， 没有 任何 理由 使 用 <span>、 <em> 之 类 标签 ， 然后 再 额外 设置 text-decoration: 


lIine=throuyhs 
text-decoration 还 文 持 同时 设置 多 个 属性 。 例 如 ， 上 划 线 和 


下 划 线 同时 出 现 ， 图 8-50 ”原价 删除 效果 





a { 
text-decoration: underline overline; 


} 


text-decoration 是 CSS 世界 中 为 数 不 多 文 持 多 属性 值 的 属性 ， 然 而 在 实际 开发 中 鲜 
有 出 场 的 机 会 ， 尤 其 如 今 设计 风格 局 平 色 块 ， 下 划 线 出 场 的 机 会 也 越 来 越 少 了 。 

在 CSS3 新 世界 中 , text-decoration 还 可 以 是 波浪 下 划 线 , 也 可 以 指定 下 划 线 颜色 等 ， 
但 也 不 知道 等 到 了 浏览 器 全 兼容 的 时 代 ，text-decoration 还 有 没有 出 场 的 机 会 。 

总 之 ， 感 觉 text-decoration 是 个 越 往 后 越 悲 兰 的 角色 。 


8.6.8 一 本 万 利 的 text-transform 字 从 大 小 写 


text-transform 也 是 为 英文 字符 设计 的 ， 要 么 全 大 写 text-transform: uppercase, 
要 么 全 小 写 text-transform:lowercase， 似 乎 没什么 值得 挖掘 的 ， 但 有 一 些 场 景 使 用 它 
却 会 有 一 本 万 利 的 效果 。 

1. 场景 一 : 身份 证 输入 

我 国 的 身份 证 最 后 一 位 有 可 能 是 字母 X， 且 各 种 场合 都 是 指定 必须 大 写 。 如 果 我 们 给 
输入 里 份 证 的 <input> 输 入 框 设置 : 




















input 1{ 
text-transform: uppercase; 


} 
那么 吏 算 我 们 各 进去 的 是 小 写 x， 出 现 的 也 是 大 与 的 X 模样 ， 电 不 其 好 ! 

2. 场景 二 : 验证 码 输入 

图 8-51 给 出 的 是 某 网 站 的 验证 码 。 这 个 验证 码 实际 上 
是 不 区 分 大 小 写 的 ， 然 而， 当 用 户 在 输入 框 输入 小 写 内 容 的 
时 候 ， 内 心 实际 上 是 悄悄 不 安 的 : 会 不 会 区 分 大 小 写 啊 ? 以 ”图 8-51 验证 但 和 验证 但 输入 区 二 
至 于 写 验 证 码 的 时 候 同 时 按 下 Shift 键 以 保证 输入 的 字符 与 样 例 一 模 一 样 ， 我 按 了 Shift 键 好 多 
年 才 发 现 不 用 区 分 大 小 写 。 设 想 一 下 ， 如 果 这 里 有 下 和 面 这 样 的 设置 : 


input 1{ 





Imf3 让 类 F3: 








text-transform: uppercase; 
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} 
用 户 悄 民 不安 的 小 心思 根本 束 不 会 出 现 ， 因 为 用 户 输入 小 写字 母 的 时 候 ， 输 
入 框 里 面 出 现 的 加 是 和 验证 码 一 样 的 大 写 内 容 。 


亲自 感受 一 下 吧 , 手动 输入 http://demo.cssworld.cn/8/6-9.php 或 者 扫 右 侧 。 
的 二 维 码 。 四 








8.7 了 解 :Eirst-Letter/:Eirst-1Line 伪 元 又 


8.7.1 深入 :first-letter 伪 元 素 及 其 实例 


很 多 年 前 , Chrome 浏览 器 和 IE9 浏览 器 还 未 出 现 , 那 时 候 fijrst-letter 叫 伪 类 选择 器 














写法 是 前 面 加 一 个 冒号 ， 如 :first-letter。 那 时候 的 语义 要 更 直 折 一些， 择 第 一 个 字符 ， 
然后 设置 一 些 样式 。 后 来 ， 伪 类 和 伪 元 妹 极 划分 得 更 加 明确 和 规范 了 ，: :after、: :before、 
“DacCkadrop, titiEetL= Letterys "fireat=l1ine. :Seleotion ss 古人 和 伪 元 未 » YaGtive, 


:focus、: checked 等 被 称 为 伪 类 ， 这 就 导致: : first-letter 的 语义 发 生 了 一 些 变 化 一 一 
首 字符 作为 元 素 的 假想 子 元 素 。 

“假想 子 元 素 ” 咏 上 去 有 些 故 弄 辫 虚 的 感觉 ， 实 际 并 不 是 ， 以 这 种 更 加 直 昌 通俗 的 方式 解 
析 才 更 容易 理解 下 面 的 很 多 现象 。 

1. : :first-letter 伪 元 素 生 效 的 前 提 

要 想 让 : :first-letter (:first-letter) 伪 元 素 生 效 , 是 需要 满足 一 定 条 件 的 , 而 且 
条 件 乍 一 看 还 挺 苛刻 。 

首先 ， 元素 的 display 计算 值 必须 是 plock、inline-block、1list-item、table- 
cell 或 者 table-caption， 其 他 所 有 display 计算 值 都 没有 用 ， 包 括 display:table 
和 display:flex 等 。 

此 外 ， 不 是 所 有 的 字符 都 能 单独 作为 : :first-letter 伪 元 素 存 在 的 。 什 么 意思 呢 ? 我 
们 看 一 个 简单 的 例子 ， CSS 和 HTML 代码 如 下 : 


p:first-letter { color: silver; } 

















按照 我 们 的 认 知 ， 第 一 个 问号 应 该 是 银色 的 ， 但 实际 上 ， 全 部 都 是 默认 的 黑色 ， 效 果 如 
图 8-52 所 示 。 站 

为 什么 呢 ? 这 是 因为 第 见 的 标点 符号 、 各 类 括号 和 引号 站 
在 : :first-letter 伪 元 素 眼中 全 部 都 是 “辅助 闫 ” 字符， 有 点 B00 
儿 买 东西 送 赠 品 的 感觉 ， 但 是 赠品 本 号 却 不 能 购买 ， 这 里 的 问号 “? ” 束 属 于 赠品 。 有 些 不 理 
解 ? 看 一 个 例子 就 知道 了 。 假 如 我 们 在 上 面 的 HTML 中 一 堆 问 号 后 面 写 上 一 些 内 容 字 符 ， 比 方 
说 中 文 “ 辅 助 ” 二 字 ， 结 果 效 果 如 图 8-53 所 示 。 
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助 
8-53 ”全 部 问号 和 “ 辅 ” 字 变 成 银色 











变 。 原 因 很 简单 , “辅助 ”二 字 才 是 : :first-letter 伪 元 素 真 正 要 收入 吉 中 作为 “ 伪 元 素 ” 
的 字符 ， 但 是 现 在 前 面 出 现 了 一 挫 它 不 感 兴趣 的 问号 ， 怎 么 办 呢 ? 那 殴 当 作 赠品 一 并 收 了， 于 
是 ， 一 大 波 字 符 全 都 成 银色 了 。 如 有 果 全 是 问号 ， 因 为 没有 主 商 品 ， 目 然 也 就 无 法 获得 赠品 ， 所 
以 : :first-letter 没有 选择 任何 字符 ， 问 号 全 部 默认 是 黑色 。 

有 人 可 能 会 有 疑问 : 那 到 发 哪些 字符 属于 “赠品 ”， 哪 些 属 于 “商品 ” 呢 ? 我 特意 做 了 测试 ， 总 
年 下 来 碘 古 ;，“ 赠 mh 了 了 付 ” 包 岳 "@%8*() CO [] [】 Ye yy TW (ys 0 ?21 oy /Ne 

正常 情况 下 可 以 直接 作为 伪 元 系 的 字符 就 是 数字 、 严 文字 母 、 中 文 、$、 一 些 运 算 符 ， 以 
及 非常 容易 被 忽视 的 空格 等 。 这 里 的 “空格 ”有 必要 再 加 粗 强调 一 下 ， 因 为 它 的 确 是 很 容易 被 
忽视 的 一 个 字符 。 

最 后 说 明 一 点 ， 字 符 前 面 不 能 有 图 片 或 者 inline-block/inline-table 之 类 的 元 素 
存在 。 例 如 ， 下 面 的 HTML 和 CSS 代码 : 


p:first-letter { color: silver; } 
<p><i style="display:inline-block"></i> 银 色 </p> 


结果 “银色 ”两 字 的 颜色 还 是 黑色 ， 如 图 8-54 所 示 。 这 就 是 因为 多 了 一 个 display 值 是 
inline-block 尺寸 为 0 的 <1> 元 素 ， 导 致 ::first-1lettez 伪 元 素 直 接 不 起 作用 了 。 

一 般 来 讲 ，: :before 仿 元 素 和 普通 元 素 之 间 没 有 多 少 瓜 得 ， 例 如 :first-chilaq 
和 :empty 之 类 的 选择 器 都 不 受 影 响 , 但 是 , 由于: :first-letter 和 : :before 一 样 也 是 念 
元 素 ,“ 暗 生 情 情 ” 也 是 难免 的 。 翻 译 成 CSS 世界 的 术语 就 是 : : :before 伪 元 素 也 参 
与 : :first-letter 伪 元 素 。 例 如 ， 如 下 CSS 和 HTML 代码 : 















































p:before { 
content: ' 新 闻 : '，; 
} 
p:first-letter { 
Color: silver; 


} 
<p> 这 是 新 闻 的 标题 ….</p> 


结果 “新 ” 变 成 了 银色 ， 如 图 8-55 所 示 。 包 括 IE8 在 内 的 浏览 器 都 是 这 样 的 表现 。 


银色 闻 : 这 是 新 闻 的 标题 
8-54 ”inline-block 元 素 让 :first-letter 无 效 图 8-55 :before 伪 元 素 的 首 字 符 变 成 银色 效果 
2.: :Eirst-Lettez 伪 元 素 可 以 生效 的 CSS 属性 
如 果 字 符 被 选 作 了 : :first-letter 伪 元 素 ， 并 不 是 像 : :before 伪 元 素 那 样 ， 几 乎 所 
有 CSS 都 有 效 ， 只 是 一 部 分 有 效 。 
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e。 所 有 字体 相关 属性 : font、font-style、font-variant、font-weight、 
font-size、 line~height 和 tont-tamilys 
。 所 有 背景 相关 属性 : packground-color、background-image、background- 


position、 background-repeat、 background-size 和 packground-attachment。 





。 所 有 margin 相关 属性 : margin、margin-top、margin-right、margin-bottom 
marogin-lertts 
。 所 有 padding 相关 属性 : padding、padding-top、padding-right、padding- 
pottomiloadding= Letts 
。 所 有 border 相关 属性 : 缩写 的 border、border-style、border-color、 
border-width 和 普通 书写 的 属性 。 
。 color 属性 。 
“ text-decoratlon, text-transftorit. letter—spacing,、 Weord-spacing (会 
适 情 境 下 )、line-height、float 和 vertical-align (内 有 当 float 为 none 
的 时 候 ) 等 属性 。 
因此 ， 如 果 妥 图 使 用 visibility:hidden 或 者 display:none 隐藏 ::first- 
letter 伪 元 素 ， 还 是 省 省 吧 。 
3. : :first-letter 伪 元 素 的 一 些 有 意思 的 特点 
(1) 支持 部 分 display 属性 值 标签 谱 套 。: :first-letter 伪 元 素 获 取 可 以 跨 标 签 , 也 
束 是 不 仪 能 选择 匿名 内 联 盒子 ， 还 能 透 过 层 层 标签 进行 选择 ， 但 是 也 有 一 些 限制 ， 并 不 是 所 有 
标签 藤 套 都 是 有 用 的 。 
gisplay 但 如 果 是 inlines blodks table、 table=rows table=C@aption,s table= 
cell、1list-item 都 是 可 以 的 , 但 是 不 能 是 inline-block 和 ijnline- 
table, 否则 : :first-letter 伪 元 素 会 直接 无 效 ; 而 display:flex 则 
改变 了 规则 ， 直 接 选 择 了 下 一 行 的 字符 内 容 。 
眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/8/7-1.php 或 者 扫 右 侧 的 二 
维 码 。 
例如 : 


p:first-letter { 


























Color: silver; 


} 
Bb > span | 
display: table; | 
} 请 选择 display 的 属性 值 :| table | 
<p><span> 第 一 个 </span> 字 符 看 看 会 不 会 变色 ?</p> 
结果 如 图 8-56 所 示 ，“ 第 ” 字 变 成 银色 了 (为 了 打印 对 比 明 显 ， 
没有 使 用 演示 页 面 的 红色 )。 图 8-56 “第 ” 变 成 银色 验证 了 
这 种 嵌 套 关系 支持 多 层 嵌 套 ， 即 连续 套 4~5 层 inline table 大型 诬 父 有 效 
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水 平 的 标签 和 没有 任何 标 俭 嵌 套 的 效果 是 一 样 的 。 
(2) 顾 色 等 权重 总 是 多 了 一 层 。 这 是 非常 容易 犯 的 一 个 错误 ， 也 是 CSS 世界 十 大 不 易 理 解 
问题 之 一 。 例 如 ， 下 面 这 个 问题 是 共同 行 发 邮件 问 我 的 ， 我 简单 编辑 了 一 下 : 


p:first-letter { 





COoOlor: red; 


} 
p > span { 
aolor: blue!important; 

gy </p> 
请 问 “ 第 ”这 个 字符 的 颜色 是 什么 ? 

基本 上 ， 超 过 95% 的 前 端 人 员 会 认为 是 blue， 因 为 大 家 都 是 从 CSS 选择 器 权重 的 角度 去 
考虑 的 。 这 个 答案 本 身 没 问 题 ， 但 是 却 忽 略 了 很 重要 的 一 点 ，: : fijrst-letter 伪 元 素 其 实 
征 作 为 子 元 聚 存在 的 ， 或 者 说 应 当 看 出 是 子 元 系 ， 于 是 融 很 好 理解 了 。 对 于 类 似 color 这 样 的 
继承 属性 ， 子 元 系 的 CSS 设置 一 定 比 父 元 素 的 级 别 要 融 ， 哪 介 父 级 使 用 了 重量 级 
的 !important， 因 为 子 元 又 会 完 继承 ， 然 后 再 应 用 上 自身 设置 。 因 此 ， 上 和 面 CSS 和 HTML 代 
码 的 最 终结 果 是 ， 第 一 个 字符 “第 ” 字 的 颜色 是 red， 红 色 ! 

这 就 是 : :first-letter 伪 元 素 的 另外 一 个 重要 特性 

4. : :first-letter 实际 应 用 举例 

电 商 产品 经 常会 有 价格 ， 价 格 前 面 一 般 都 有 一 个 ¥ 符 号 ， 这 个 符号 字体 往往 会 比较 特殊 ， 
字号 也 比 罗 大 , 同时 和 文字 的 数值 有 几 像 系 的 距离 。 要 实现 这 样 的 效果 ， 通 第 的 做 法 是 在 ¥ 符 号 
外 面包 一 个 span 标签 , 命名 一 个 类 名 ,然后 通过 CSS 控制 。 实 际 上 ,还 有 更 简单 巧妙 的 方法 ， 
就 是 使 用 本 文 介绍 的 : : first-letter 伪 元 素 。 

CSS 示例 代码 如 下 : 


.Price:first-letter 1{ 
































颜色 等 权重 总 是 多 了 一 层 。 








margin-right: Spx; 
font-size: xx-large; 
vertical-align: -2px; 


} 

于 是 ， 我 们 的 HTML 就 可 以 很 简洁 : 

<p>¥399</p> 尘 499 

¥ 并 不 是 “赠品 字符 ” 因此 这 里 可 行 ， 最 后 效果 如 图 8-57 8-57 ”¥ 往 使 用 : :first- 
所 示 letter 控制 后 的 效果 
8.7.2 ”故事 相对 较 少 的 :first-line 伪 元 素 


:first-line 和 :first-letter 像 是 对 表 兄 第 ， 所 谓 “ 不 是 一 家 人 不 进 一 家 门 ”， 它们 
长 得 类 似 ， 很 多 特性 也 类 似 。 但 是 相 比 之 下 ，: first-line 的 故事 要 少 一 些 ， 没 有 “赠品 字 


[Ea 
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符 ” 之 闫 的 梗 存在 。 


包 :first-line 和 :first-letter 伪 元 素 一 样 ，IE9 及 以 上 版 本 浏览 器 支持 双 岂 


写 ::first-1Linefl} 写 法 ，IE8 浏 览 器 只 认识 单 骨 号 写法 。 


e。 :first-line 和 :first-letter 伪 元 素 一 样 ， 只 能 作用 在 块 级 元 系 上 ， 也 就 是 
display 为 block、inline-block、1list-item、table-cell 或 者 table- 


caption 的 元 素 设 置 :first-1Line 才 有 效 ，table、flex 之 类 都 是 无 效 的 。 
。 :first-line 和 :first-letter 伪 元 背 一 样 ， 仅 文 持 部 分 CSS 属性 ， 例 如 : 

。 所 有 字体 相关 属性 ; 

。 color 属性 ; 

。 所 有 背景 相关 属性 ; 








e text-decoration、 text-transfor、 letter-spacing、 word-spacing、 


line-height 和 vertical-align 等 属性 。 


。 :first-line 和 :first-letter 伪 元 素 一 样 ，color 等 继承 属性 的 权重 总 是 多 了 
一 层 ， 毕 竟 称 为 “ 伪 元 素 ”， 束 好 像 里 面 还 有 个 子 元 素 。 如 果 :first-line 和 :first- 
letter 同时 设置 颜色 ，: first-letter 级 别 比 :first-line 高 ， 即 使 :first- 











line 写 在 后 面 ， 甚 至 加 !important (如 果 浏 览 器 支持 ) 也 是 如 此 。 


e。 :first-line 和 :first-letter 伪 元 素 一 样 ， 也 支持 标签 舱 套 ， 但 是 具体 细则 





和 :first-letter 出 入 较 大 ， 例 如 ， 它 不 文 持 taple 相关 属性 等 。 
具体 大 家 可 以 杀 目 感受 一 下 , 手动 输入 http://demo.cssworld.cn/8/7-2.php 或 [四 ] 。 
者 扫 右 侧 的 二 维 码 。 "IT 
例如 : E 


p:first-letter { 









color: silver; 
} 
p > span { 
display: inline-block; 
} 
<p><span> 第 一 行 </span> 字 符 看 看 会 不 会 变色 ? </p> 


结果 在 Chrome 浏览 器 下 颜色 居然 断 开 了 ， 如 图 8-58 所 示 。 








一 一 


第 一 行 





8-58 Chrome 浏览 器 下 inline-block 阴 汤 :first-line 


IE 和 Firefox 都 没有 这 个 问题 ， 文 字 颜 色 都 是 一 样 的 。 因 此 ， 如 果 想 使 用 : first-line,， 


首 行 内 容 不 能 混入 ijnline-pblock/inline-table 元 素 。 
: :first-line 实际 应 用 举例 





下 面 就 举 一 个 我 在 某 干 万 级 访问 项 目 中 使 用 : :first-line 的 例子 吧 。 大致 是 这 样 的 : 我 
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希望 网 站 小 标签 、 线 框 按钮 和 实 色 按 钮 全 部 都 可 以 使 用 color 闫 色 控 制 ， 例 如 : 
<a href class="btn-normal red" role="button"> 红 色 按 钮 </a> 
过 本 ref class="Dtn-normaLl DIue™ Fole="button"> 术 人 色 按 钮 <7Xa3S 
<a href class="btn-normal green"” role="button"> 绿 色 按 钮 </a> 


其 中 ，.red、.blue、.green 是 站 点 通用 的 颜色 类 名 。 结 采 我 就 遇 到 了 难题 ， 当 我 们 使 用 如 
下 CSS 代码 的 时 候 ， 实 色 背 景 按钮 融会 遇 到 文字 颜色 和 背景 颜色 一 样 的 问题 : 


.btn-normal { 








background-color: currentColor; 


} 


因为 变量 currentColor 就 是 当前 color 的 色 值 。 怎 么 办 呢 ? 考虑 到 按钮 上 的 文字 都 是 白色 ， 
因此 我 们 可 以 这 样 处 理 : 
.btn-normal: :first-line { 


color: #fff; 
} 


因为 利用 了 : :first-line 伪 元 素 ， 于 是 .btn-normal 标签 上 的 颜色 实际 上 是 设置 给 
background-color 的 ,而 按钮 真正 呈现 的 颜色 已 经 被 : :first-line 伪 元 素 牢 牢 设 置 好 了 ， 
束 完 全 不 用 担心 文字 颜色 和 背景 色 混 在 一 起 了 。 

大 功 告 成 ! 此 时 ， 如 果 要 新 增 一 个 黑色 按钮 ， 直 接 用 下 面 的 HTML 代码 就 可 以 了 ， 无 须 额 
外 再 去 写 按钮 相关 的 CSS 代码 : 


<a href class="btn-normal black" role="pbutton"> 绿 色 按 钮 </a> 




















前 面 几 章 介 绍 了 与 CSS 世界 布局 相关 的 内 容 , 如 果 用 建筑 打 比 方 , 就 是 毛坯 房 已 经 建 好 了 ， 
理论 上 可 以 入 住 了 ， 但 实际 上 ， 我 们 或 多 或 少 都 会 对 房间 进行 一 定 的 装修 ， 这 个 “装修 ”反映 
在 CSS 世界 中 就 是 “元 素 的 装饰 和 美化 ”， 如 设置 合适 的 颜色 或 者 增加 合适 的 底 纹 等 。 
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9.1.1 少 得 可 怜 的 颜色 关键 字 


这 里 的 “ 闫 色 关 键 字 ” 指 的 是 诸如 red、blue 这 些 关 键 字 。 

CSS1 的 时 候 只 支持 16 个 基本 颜色 关键 字 ， 如 black、white。 为 什么 数量 这 么 少 呢 ? 我 
们 可 以 想 想 当时 的 显示 器 水 平 ， 不 是 黑 日 的 已 经 不 错 了 。 

CSS2 的 时 候 ， 显 然 应 该 要 新 增 一 些 闫 色 关 键 字 。 或 许 很 多 人 满怀 希望 ， 总 以 为 会 有 什么 
惊 言 ， 结 果 果 然 很 惊喜 ! 后 然 只 加 入 了 一 个 颜色 一 一 楼 色 orange。 

到 了 CSS3 的 时 候 ， 以 为 义 会 是 “ 雷 声 大 ， 雨 点 小 ”， 结果 这 次 却 出 人 意料 ， 一 下 子 增 
加 了 100 多 个 颜色 关键 字 ， 甚 至 连 mediumturquoise 这 样 的 复杂 得 看 不 懂 也 记 不 住 的 关 
键 字 都 出 现 了 。 这 些 扩 展 的 CSS 颜色 关键 字 是 有 专门 的 名 称 的 ， 称 为 “XI11 闫 色 名 ”， 这 里 
的 “X11” 不 是 11 区 的 意思 ， 而 是 指 用 来 显示 位 图 的 X Window System， 常 见于 类 UNIX 计 
算 机 系统 上 。 

到 了 CSS4 的 时 候 ， 以 为 又 会 有 什么 惊人 之 举 ， 结 果 叉 仪 增加 了 一 个 闫 色 关 键 字 一 一 
rebeccapurple。 

在 本 书 中 ，CSS 世界 指 CSS 2.1，CSS 新 世界 指 CSS3，CSS 新 新 世界 指 CSS4， 因 此 ，CSS 
志 界 中 支持 的 颜色 关键 字 其 实 少 得 可 怜 ， 总 共 束 17 个 ， 如 图 9-1 所 示 。 其 中 ，gray 和 grey 
表示 的 是 同一 个 颜色 值 。 如 果 想 了 解 更 多 CSS3 颜色 关键 字 ， 可 以 阅读 这 篇 文章 ; http://www. 









































zhangxinxu.com/wordpress/?p=4859。 

所 有 CSS3 新 增 的 颜色 关键 字 原 生 IE8 浏览 
器 都 是 不 文 持 的 。 注 意 ， 这 里 特意 加 了 “原生 ” 
二 字 。 我 们 总 是 使 用 IE 兼容 模式 去 测试 低 版 本 
IE 浏览 器 , 但 不 总 是 准确 的 ,其 中 之 一 就 是 颜色 。 
如 采 你 用 高 版 本 正 浏览 器 的 IE8 模式 去 浏览 ， 
会 发 现 CSS3 的 颜色 值 都 是 可 以 准确 泻 染 的 ， 但 
实际 上 ， 原 生 IE8 都 不 认识 ， 而 使 用 IE8 的 用 户 
几乎 全 部 都 是 原生 IE8， 因 此 要 慎 用 。 不 过 ， 考 
虑 到 实际 开发 的 时 候 设 计 师 不 可 能 就 使 用 这 些 
关键 字 对 应 的 闫 色 ， 因 此 ,我 们 没 多 少 机 会 使 用 
颜色 关键 字 ， 也 上 自然 很 难 有 机 会 踩 到 这 个 坑 。 

事情 还 没有 结束 ， 接 下 来 ， 关 于 颜色 名 称 ， 还 
有 一 个 很 有 意思 但 很 多 人 都 不 知道 的 特性 表现 ， 那 
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CSS Level 2 (Revision 1 ) 


| 并 


RGB hex 植 "实时 表现 


UUUUUYUY 


UOUUYU 


#008880 


#00FFFf 


二 
十 
十 
[ew 局 D 


#ffa568 


图 9-1 CSS 世界 文 持 的 颜色 关键 字 





就 是 ， 如 果 浏 览 器 无 法 识别 颜色 关键 字 ， 那 么 HTML 中 对 颜色 关键 字 的 解析 和 CSS 中 的 会 不 一 样 。 


这 里 有 必要 好 好 解释 一 下 。 大 家 应 该 都 知道 , 传统 HTML 的 部 分 属性 可 以 直接 支持 color 


属性 ， 例 如 : 


<font color="™pink"> 少 女 色 </font> 


同时 ， 我 们 也 可 以 通过 style 属性 书写 color 声明 。 例 如 : 


<font style="color:pink; "> 少女 色 </font> 


如 条 浏 览 右 认识 这 些 颜色 关键 字 ， 则 该 什么 颜色 就 显示 什么 烦 色 但是， 如果 浏览 器 无 法 


识别 这 些 闫 色 关 键 字 ， 则 两 种 书写 的 最 终 表现 会 有 差异 。 





在 HTML 中 , 会 使 用 其 他 算法 将 非 识别 颜色 关 键 字 转换 成 男 外 一 个 完全 不 同 的 颜色 值 ; 而 


在 CSS 中 则 是 直接 使 用 默认 闫 色 值 。 








例如 ， 我 们 使 用 CSS4 水 平 的 颜色 关键 字 repeccapurple 做 测试 ，HTML 代码 如 下 : 


<h1 style="color:rebeccapurple;">CSS 色 和 <font color="rebeccapurple">HTML 色 </font> 


解析 差异 测试 </nhL> 


IE9 浏览 需 下 的 结果 如 图 9-2 所 示 。 


CSS 色 和 HTMIL 色 解析 差异 测试 


9-2 IE9 浏览 器 下 “HTML 色 ” 显 示 为 绿色 


IE11 浏览 需 下 的 结果 则 如 图 9-3 所 示 。 





CSS 色 和 HTML 色 解析 差异 测试 


图 9-3 IE11 浏览 器 下 所 有 文字 都 是 俩 紫色 的 








1 
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9.1.2 不 支持 的 transparent 关键 字 


transparent 关键 字 是 一 个 很 有 意思 的 关键 字 ， background-color:transparent 
包括 IE6 浏览 器 都 支持 ,border-color:transparent 从 IE7 浏 览 器 开始 支持 ,但 是 color: 
transparent 却 从 IE9 浏览 器 才 开 始 支 持 。 

我 确定 color:transparent 原生 IE8 浏览 融 不 文 持 ， 会 使 用 默认 颜色 代 人 虞 。 不 要 拿 兼 
容 模式 下 的 测试 结果 说 事 儿 ， 那 是 不 准 的 。 蜗 版 本 正 浏览 器 下 的 IE8 羔 容 模式 color: 
transparent 确实 可 以 让 文字 透明 ， 但 是 IE8 用 户 都 是 使 用 原生 IE8 的 。 


9.1.3 不 支持 的 currentColor 变量 


currentColor 变量 是 个 好 东西 ， 可 以 使 用 当前 color 计算 值 ， 即 所 谓 闫 色 值 。 但 是 同 
样 地 ，IE9+ 浏 磺 硕 才 文 持 它 。 

实际 上 ，CSS 中 很 多 属性 值 默 认 束 是 currentColor 的 表现 ， 我 们 一 般 (| 除了 部 分 浏览 
器 animation 需要 ) 无 顷 男 由 添 足 地 再 声明 这 个 关键 字 。 如 border、text-shadow、 
box-shadow 等 ， 尤 其 border， 包 括 IE7 在 内 的 浏览 堪 都 是 如 此 特性 。 因 为 我 们 使 用 图 形 生 
成 的 时 候 ， 尺 量 使 用 border 属性 ， 所 以 hover 变色 只 需要 控制 color 值 就 可 以 了 。 例 如 : 


.test { 
Color: red; 



































border: 2px solid; 
} 


没有 必要 这 么 使 用 : 


.test { 
Color: red; 
border: 2px solid currentColor; 


} 


9.1.4 不 支持 的 rgba 颜色 和 hs1lLa 着 色 


CSS 世界 的 color 属性 支持 十 六 进 制 颜色 、rgb 颜色 。 十 六 进 制 颜色 指 的 是 长 得 像 
#000000 或 #000 这 样 的 颜色 ,我 们 在 CSS 中 用 得 最 频 澡 的 就 是 这 种 格式 的 颜色 。 为 什么 呢 ? 
因为 字符 数目 最 少 ， 书 写 更 快 ， 演 染 性 能 更 高 。 

rgb 颜色 实际 上 和 十 六 进 制 颜 色 是 近亲 ， 都 归属 于 *gpb 颜色 ， 只 是 进 制 有 差异 。rgpb 格式 
从 我 入 行 起 浏览 器 就 文 持 了 ， 除 了 文 持 数值 颜色 ， 如 rgb (255，0，51) ， 还 支持 百分比 rgb 
颜色 ， 如 rgb (100%，0%，20%)， 这 个 很 多 人 应 该 是 不 知道 的 。 

rgb 数值 格式 只 能 是 整数 ， 不 能 是 小 数 ， 否 则 ， 包 括 各 正 以 及 Chrome 在 内 的 浏览 器 都 会 
无 视 它 。 下 面 是 一 些 支持 和 不 支持 rgp 数值 格式 的 示例 : 


/* 下 面 这 些 都 是 同一 个 RGB 颜色 : */ 
#f03 
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#F03 

#ff0033 

#FFO0033 

rgb (255,0,51) 

rgb (255, 0, 51) 

rgb(255，0，51.2) /* 无 效 ! 整数 ， 不 能 小 数 */ 

rgb (100%, 0%,20%) 

rgb (100%, 0%, 20%) 

rgb (100%，0，20%) /* 无 效 ! 整数 和 百分比 不 能 在 一 起 使 用 */ 

但 color 属性 并 不 支持 hnsl 颜色 、rgba 颜色 和 nsla 上 颜色 。 

hsl 颜色 是 CSS3 才 出 现 的 颜色 表现 格式 ,IE9+ 浏 览 器 才 支 持 。 和 rgb 分 别 表示 red、 green、 
blue 一 样 ，hsl 颜色 的 3 个 字母 也 有 目 己 的 含义 。 其 中 ，h 表示 hue， 是 色调 的 意思 ， 取 值 0 一 
360， 大 致 按照 数值 红 、 梭 、 黄 、 绿 、 青 、 监 、 紫 变化 节 委 ; s 表示 saturation (饱和 上 度 )， 用 0 一 
100% 表 示 ， 值 越 大 饱和 上 度 越 高 ， 闫 色 越 亮 ， 通 常 我 们 评价 某 设 计 “ 竞 瞎 我 们 的 眼 ”， 就 是 “这 
个 设计 颜色 饱和 度 太 高 ”的 另 一 种 说 法 ; 1 表示 lightness《〈 亮 度 )， 也 用 0 一 100% 表 示 ， 值 越 高 
颜色 越 亮 ，100% 就 是 白色，5$0% 则 是 正常 亮度 ，0% 就 是 黑色 。 

在 取 色 器 中 ，hs1 颜色 非常 管用 ， 有 助 于 迅速 选取 我 们 想 要 的 两 色 值 ， 或 者 根据 现 有 两 色 
得 到 近似 色 。 比 方 说 ， 我 们 要 实现 一 个 hover 效果 ，hover 一 个 色 块 ， 然 后 颜色 加 深 ， 怎 么 实现 
呢 ? 使 用 rgb 很 不 方便 ， 而 使 用 hsl 则 很 简单 ， 我们 只 要 把 1 (也 束 是 亮度 ) 稍微 调 低 一 点 儿 
束 可 以 了 了。 

最 后 ，CSS3 中 的 颜色 文 持 Alpha 透明 通道 ， 于 是 束 有 了 rgba 颜色 和 hs1la 闫 色 ，a 表示 
透明 度 ， 取 值 在 0 一 1，0 表示 完全 透明 ，1 表示 实 色 无 透明 。 如 果 使 用 小 数 ， 前 面 的 0 可 以 省 
略 ， 能 节约 一 个 字符 大 小 。 

rgba(255,0,0,.7) 

hsla (240,100%, 50%, .7) 


更 深入 、 更 有 趣 的 知识 这 里 就 不 展开 了 。 
9.1.5 支持 却 鸡肋 的 系统 颜色 


“系统 颜色 ” 指 的 是 什么 呢 ? 

我 们 都 知道 ，Windows 操作 系统 的 不 同 主题 的 弹 框 、 工 具 栏 之 类 的 闫 色 都 是 不 一 样 的 ， 这 
些 不 一 样 的 颜色 就 称 为 系统 颜色 。 在 Web 中 ， 我 们 也 可 以 使 用 这 些 颜色 ,我们 可 以 实现 和 系统 
主题 风格 类 似 的 Web 组 件 皮 肤 效 果 。 

那么 ， 都 有 哪些 系统 颜色 关键 字 呢 ? 

下 面 是 我 做 的 一 些 整 理 。 注 意 ， 这 些 是 跟着 系统 走 的 ， 不 是 所 有 的 系统 都 文 持 ， 而 且 有 些 
值 是 跟着 浏览 器 走 的 ， 在 Chrome 浏览 器 下 可 能 是 淡 灰 色 ， 而 在 下 下 可 能 是 日 色 等 ， 如 网 9-4 
所 示 〈 图 截 目 Chrome )。 

如 此 上 世纪 风格 的 色 值 表现 和 当下 设计 风格 格格 不 入 ， 加 上 人 色 值 跟着 系统 走 ， 最 终 表 现 不 
可 控 ， 使 得 在 实际 项 目 中 几乎 没有 任何 使 用 系统 颜色 的 理由 ， 给 人 感觉 比较 鸡肋 。 
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ActiveBorder | 荣 单 中 的 文本 。 应 使 
激活 态 窗 体 边框 。 GrayText 用 Menu 背 景色 。 

忒 色 的 (disabled) 文 

本 。 | 
ActiveCapti | scrollbar 
激 渤 本 客体 标题 。 应 人 | 滚动 条 灰色 区 域 。 
该 使 用 CaptionText 前 景 ”| Highlight 
色 。 控件 中 被 选中 的 项 。 

应 使 用 HighlightText 前 | ThreeDDarkShadow 

| 景色 。 到 高 30 元 素 光 源 的 两 
AppWorks 边框 中 比较 瞳 《通常 
多 雪 档 界面 攻 旺 色 。 | 外 面 ) 的 那个 颜色 。 


HighlightText 
控件 中 被 选中 的 项 的 如 有 
本 。 应 使 用 Highlight | ThreeDFace 





Back nd 已 
旧 面 背景 。 背景 色 3D 元 素 的 表面 背景 

| Wl 色 。 应 使 用 ButtonText 
| | 前 景色。 

InactiveBorder | 全 地 
ButtonFace 洲 汪 杰 窒 体 j i 
ThreeDtighiight 
色 ， 之 所 以 会 呈现 3D 效 1 : 
果 ， 是 由 于 局 转 有 一 层 | 面 对 3D 元 素 光 产 两 个 边 
边框 。 应 该 个 用 Button InactiveCaption EE 高 通常 为 外 面 ) 的 
Text 的 前 景色 。 ' 非 激活 态 窗 体 标题 。 那 一 个 。 

| 应 使 用 InactiveCaption | 

Text 前 景色 。 
ButtonHighlight ThreeDLightSshadow 
3D 元 素面 对 光源 的 边框 | 面 对 3D 元 素 光 源 的 两 个 


色 ， 之 所 以 会 呈现 3D 效 “| InactiveCaptionText | 边框 中 比较 瞳 《 通 常 为 

果 ， 鱼 由 于 局 国有 二 层 | 非 激活 标题 的 文本 颜色 。| 里面) 的 那个 颜色 。 

边框 。 应 使 用 InactiveCaption | | 
| 背景 色 。 | 


| ' ThreeDShadow 
ButtonShado | 远离 3D 元 素 光 源 的 两 个 
3D 元 袁 兰 对 光源 的 边框 ' InfoBackground 边框 中 比较 高 《通常 为 
色 ， 之 所 以 会 呈现 3D 效 | de 里 面 ; 的 那个 颜色 。 
果 ， 是 由 于 周围 有 一 层 训 司 用 InfoTe 站 前 景 3 





边框 。 色 。 

Window 
窗 保 符 慰 。 应 全 用 
ButtonText InfoText WindowText 前 景色 。 


按钮 文本 。 需要 使 用 提示 框 控件 文本 色 。 
ButtonFace 或 ThreeDFace| 应 使 用 InfoBackground 
背景 色 。 | 背景 色 。 WindowFrame 


CaptionText Menu 
标题 文本 ， 尺寸 盒子 ， 菜单 有 景 。 应 使 用 WindowText 

以 及 滚动 条 箭头 总 子 。 | MenuText 前 景色 。 | 窗 体 中 的 文本 。 应 使 
需要 使 用 ActiveCaption 用 Window 背 景色 。 


eee 四 


[PE | MenuText 
9-4 系统 颜色 关键 字 值 和 示意 


系统 颜色 虽然 又 冷门 又 不 好 看 ， 但 其 实 也 是 可 以 在 实际 项 目 中 有 所 应 用 的 。 举 两 个 我 
自己 实践 的 案例 : 一 是 在 编辑 器 中 模拟 块 状 内 容 ( 非 图 片 、 非 文字 ) 被 选中 效果 ， 为 了 和 
原生 选中 的 效果 一 样 ， 使 用 了 系统 颜色 ， 看 不 出 是 模拟 的 ;二 是 集成 了 众多 模 
块 的 工具 页 面 需 要 有 一 个 即时 取 色 配色 功能 , 主要 是 给 设计 师 用 的 ,显然 ,传统 的 skin1.css、 
skin2.css 预先 全 部 写 好 再 切换 的 方式 是 不 行 的 ， 因为 模块 是 分 散 旧 独立 的 ， 色 值 是 不 确定 
的 ， 也 不 能 说 入 库 走 变量 或 者 运行 Node.js 工具 什么 的 , 开发 和 维护 成 本 都 很 高 ， 因 此 最 好 
Web 前 端 解决 。 可 以 采用 使 用 系统 色 作 为 模块 的 CSS 色 值 的 方式 实现 。 其 好 处 在 于 以 下 
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(1) 系统 凑 色 本 身 有 凑 色 ， 我 们 的 模块 是 可 以 即时 预览 的 ， 双 击 html 模块 文件 束 可 以 ， 
没有 任何 其 他 依赖 。 

(2) 系统 磊 色 名 称 都 比较 蜗 冷 ， 非 常 适合 作为 变量 ， 蔡 换 时 不 会 发 生 冲 突 。 

于 是 ， 当 我 们 选取 某 一 颜色 后 ， 只 要 把 所 有 CSS 中 的 系统 颜色 变量 替换 成 选中 的 色 值 ， 任 
意 组 装 的 模块 的 即时 配色 的 效果 融 实 现 了 。 


9.2 CSS 此 窜 的 background 很 单调 


CSS 世界 中 的 packground 大 部 分 有 意思 的 内 容 都 是 在 CSS3 新 世界 中 才 出 现 的 ， 如 
Multiple backgrounds( 多 背景 )、background-size( 缘 景 尺寸 ) .background-origin 
(背景 初始 定位 盒子 )、background-clip (背景 剪 切 盒子 ) 等 。 

相 比 之 下 ，CSS 世界 支持 的 packground 那 点 东西 就 显得 比较 单调 了 ， 毕 苋 那 个 时 代 以 
图 文 展示 为 主 ， 闭 饰 和 美化 并 不 是 重点 。 

当 我 们 使 用 background 属性 的 时 候 ， 实 际 上 使 用 的 是 一 系列 background 相关 属性 的 
集合 ， 包 括 : 


e background-image: none 

















oO 


e background-position: 0% 0 
es background-repeat: repeat 
es background-attachment: scroll 
e background-color: transparent 
如 果 是 IE9+ 浏 览 融 ， 则 还 包括 : 
e background-size: auto auto 
e background-origin: padding—-box 
e background-clip: border-box 
本 书 仪 介绍 浏览 器 都 支持 的 上 面 S 2 background 相关 属性 ， 虽 然 相 比 之 下 有 些 单调 ， 
但 一 些小 故事 还 是 有 的 。 


9.2.1 隐藏 元 素 的 background-image 到 底 加 不 加 载 


隐藏 元 素 的 background-image 到 底 加 不 加 载 呢 ? 想必 这 是 一 个 很 多 人 都 感 兴趣 的 问题 。 

根据 我 的 测试 ， 一 个 元 系 如 果 display 计算 值 为 none， 在 正 浏 览 句 下 (IE8 一 下 11， 更 
高 版 本 不 确定 ) 依然 会 发 送 图 片 请 求 ，Firefox 浏览 器 不 会 ， 至 于 Chrome 和 Safari 浏览 器 则 似 
平 更 加 智能 一 点 : 如 果 隐 藏 元 素 同 时 叉 设 置 7 了 background-image， 则 图 片 依然 会 去 加 载 ; 
如 条 是 父 元 系 的 display 计算 值 为 none， 则 背景 图 不 会 请 求 ， 此 时 浏 贤 兹 或 许 放 心地 认为 这 
个 背景 图 暂时 是 不 会 使 用 的 。 

IE8 浏览 器 支持 base64 图 片 ， 包 括 在 background-image 属性 中 使 用 ， 可 以 节约 一 个 网 络 
请 求 。 但 是 ，base64 图 瞩 的 泻 染 性 能 并 不 高 ， 只 运 合 斥 寸 比 较 小 的 图 乒 ， 大 斥 才 图 卢 慎 用 。 
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如 果 想 用 backgroundq-image 实现 鼠标 光标 经 过 变换 图 片 的 效果 例如 ， 灰 色 的 天 闭 图 
片 鼠标 光标 经 过 变 成 深 色 )， 则 务必 将 这 两 张 图 片 合并 在 一 张 图 片上 ， 除 了 减少 请 求 外 ， 这 样 做 
更 重要 的 好 处 是 交互 体验 更 好 了 。 如 果 图 片 不 合 在 一 起 ， 当 鼠标 光标 经 过 的 时 候 ， 驶 会 去 请 求 
男 外 一 张 图 片 的 地 址 ， 如 果 这 个 图 片 没 有 说 缓存 ， 则 请 求 肥 出 去 到 图 片 显 示 古 有 一 段 时 间 的 ， 
很 容易 出 现 鼠 标 光 标 经 过 关闭 图 片 ， 结 来 图 片 消 失 的 情况 ， 实 际 上 图 片 不 是 消失 了 ， 而 是 还 在 
请 求 的 路 上 。 


9.2.2 与 众人 不同 的 background-position 百分比 计算 方式 
CSS 中 有 一 类 属性 值 被 称 作 <position> 值 ， 表示 一 种 CSS 数据 类 型 、 二 维 坐标 空间 ， 用 
于 设置 相对 盒子 的 坐标 。 


<position> 值 支持 1 一 4 个 值 ， 可 以 是 具体 数值 ， 也 可 以 是 百分比 什 ， 还 可 以 是 left、 
top、right、center 和 bottom 等 关键 字 。 图 9-5 给 出 了 经 典 的 示意 。 


























left center rioght 


:100px 








top 尖 | | 
R top 75px left 100px 或 ] 
left 100Px ‘itop 75px 

center 上 于 rE cighte 
ee center | 

或 center left 100% 

到 top S50% left 100% 


pe pe A 2 
top 100% 25% 或 
100 委 25% 


9-$ <position> 值 经 典 示 意 


如 果 缺 省 偏 移 关键 字 ， 则 会 认为 是 center, 因此 background-position:top center 
以 直接 写成 background-position:top。 

IE8 浏览 器 最 多 只 支持 同时 出 现 2 个 值 ， 从 IE9 开始 支持 同时 出 现 3 个 值 或 4 个 值 ， 作 用 
是 指定 定位 的 偶 移 计算 从 哪个 方位 算 起 。 例 如 : 


background-position: right 40px bottom 20px; 


表示 距离 右边 缘 40 像素 ， 距 离 底 边缘 20 像素 。 
<position> 值 也 支持 百分比 值 ， 不 过 其 表现 与 CSS 中 其 他 的 百分比 单位 表现 都 不 一 样 。 


img { position: absolute; left: 100%; } 
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一 定 是 在 包含 块 的 外 部 。 但 是 ， 在 <position> 值 中 却 是 不 一 样 的 表现 ， 如 图 9-6 所 示 。 其 





中 ， 上 和 面 美 女 图 片 是 background-position:100% 100gs 定 位 ， 下 面 半 透明 的 美女 网 所 
是 left:100% 定 位 。 位 置 明显 不 一 样 ， 主 要 是 <position> 值 的 百分比 值 有 着 特殊 的 计算 
人 7 


positionx = (容器 的 宽度 - 图 片 的 宽度 ) * percentx; 

positionY = (容器 的 高 度 - 图 片 的 高 度 ) * percentY; 
因此 ， 当 packground-position:100% 100% 时 候 ， 实 际 定 位 值 就 是 容器 尺寸 和 图 片 尺寸 
的 彼 ， 于 是 束 有 了 右 下 角 所 示 的 定位 效果 。 

有 了 这 个 公式 ， 我 们 也 就 能 理解 百分比 负 值 的 一 些 表 现 了 。 比 方 说 ， 你 觉得 下 面 这 行 CSS 
代码 对 应 图 片 的 表现 是 怎样 的 ? 

background-position: -50% -50%; 
是 不 是 觉得 图 片 应 该 是 定位 在 容器 的 左上 角 ， 并 有 部 分 区 域 超出 不 可 见 ? 但 是 ， 实 际 出 现 的 效 
果 如 图 9-7 所 示 ， 接 近 于 下 面 CSS 代码 的 效果 : 


background-position: 40px 1l10px; 
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深 受 传统 百分比 定位 迷惑 的 我 们 可 能 一 时 会 想 不 通 ， 明 明 是 个 负 值 百分比 定位 ， 怎 么 会 是 
一 个 正 值 效 果 呢 ?我们 套用 <position> 百 分 比值 计算 公式 ， 就 升 然 开朗 了 ! 

此 案例 中 容器 尺寸 是 160x160， 图 片 尺寸 是 256x192， 图 片 尺 寸 大 于 容器 尺寸 ， 所 以 : 

。 (容器 的 宽度 -图 厂 的 宽度 ) x (-50%) 的 结果 是 个 正 值 ; 

。  ( 容 占 的 高 度 - 图 片 的 高 度 ) x (-50%) 的 结果 也 是 个 正 值 。 

因此 ， 最 终 的 表现 并 不 是 图 片 定位 在 容器 外 ， 而 是 定位 在 容器 内 。 





9.2.3 background-repeat 与 演 染 性 能 


background—-repeat 支持 repeat、 repeat-x、 repeat-y 这 儿 个 什 ， 语 尺 ) 青 上 晰 ， 系 
容 性 好 ， 没 什么 有 趣 的 故事 。background-repeat 以 前 用 得 很 多 ， 但 如 今 设 计 趋 势 是 辟 欢 局 
平和 纯色 ， 其 使 用 频率 下 降 明 显 ， 反 倒是 在 实现 一 些 复杂 纹理 或 者 配合 “ 峡 原 则 ”实现 随机 背 
景 这 些 比 较 新 潮 的 地 方 见 到 的 比较 多 。 
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唯一 值得 一 提 的 一 个 小 知识 点 就 是 background-repeat 的 性 能 。 举 个 例子 ， 要 实现 某 
黑色 半 透 明 遮 暑 背 景 ， 因 为 IE8 并 不 支持 *gba 半 透 明 背 景色 ， 所 以 为 了 兼容 我 们 决定 使 用 一 
个 半 透 明 图 片 代 蔡 ， 假 设 图 片 名 为 alpha .png， 则 CSS 代码 如 下 : 


.Overlay { 





background: url(alpha.png); 
background: rgba(0,0,0,.75); 
} 


然后 有 些 人 为 了 追求 极 臻 ， 就 把 alpha .png 做 成 了 1 像素 x1l 像素 大 小 ,确实 图 片 尺 寸 小 
了 那么 一 点 护 ， 但 是 外 单 背 景 出 现 的 时 候 会 有 明显 的 卡 顿 ， 体 验 非常 不 好 。 完 其 原因 ， 束 是 平 
铺 图 片 尺寸 太 小 ， 平 铺 次 数 太 多 ， 演 染 太 吃力 ， 其 实 我 们 大 可 把 背景 图 保存 成 100 像素 x100 像 
素 大 小 ， 这 样 一 来 ， 图 片 尺寸 并 没有 大 多 少 ， 但 是 渔 染 性 能 却 有 明显 提升 。 














9.2.4 外 强 中 干 的 background-attachment :fixed 


background-attachment :fixed 怕 是 很 多 人 都 没 用 过 ， 甚 至 都 没 见 过 。 这 是 一 个 IE7 浏 
览 器 束 开 始 支 持 的 CSS 声明 。 在 CSS 志 界 中 , background-attachment 支持 scroll 和 fixed 
两 个 属性 值 ， 其 中 scroll 是 默认 值 ， 就 是 平常 使 用 背景 图 的 效果 表现 ，fixed 表示 背景 相对 于 
当前 文档 视 区 定位 , 也 就 是 页 面 再 怎么 深 动 背景 图 片 位 置 依 旧 纹 丝 
不 动 ， 稳 右 泰 山 。 

听 上 去 ,background-attachmen:fixed 应 该 和 position: 
fixed 声明 一 样 ， 是 个 很 历 害 的 角色 才 对 。 但 实际 上 其 外 强 中 
干 ， 在 某 些 场 合 它 确实 很 厉害 ,但 是 局 限 太 大 ， 没 法 实用 。 

举 个 例子 。 要 实现 一 个 图 片 局 部 动态 模糊 效果 ， 如 图 9-8 所 


示 。 此 时 ，background-attachment :fixed 就 可 以 大 显 神 图 9-8 方块 区 域 可 拖 忠 ， 移 动 
威 了 : 到 哪里 哪里 就 模糊 


























.box { 
width: 256px; height: 192px; 
background-image: url(1.jJp9g); 
background-attachment: fixed; 
position: relative; 
overflow: hidden; 

} 

.box > .drag { 
width: 1l100px; height: 1l100px; 
background: inherit; 
filter: blur (Spx); 
Cursor: grab; 
position: absolute; 


} 


此 时 ， 只 要 .qdrag 元 素 动态 改变 left/top 值 ， 我 们 的 功能 就 实现 了 。 因 为 .drag 元 聚 的 
background 继承 于 父 元 系 .box, 同样 的 背景 图 ,同样 的 packground-attachment: fixed 
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锁定 ， 根 本 吏 不 需要 JavaScript 动态 改变 packground-position 位 置 , 因为 元 素 都 是 相对 于 
文档 视 区 定位 的 。 

这 看 似 美好 ， 却 有 一 个 很 大 的 局 限 性 ， 那 就 是 页 面 的 高 
度 不 能 超过 一 屏 ， 因 为 页 面 一 旦 可 以 深 动 ， 效 果 束 完全 被 奴 
挤 ， 背 景 图 立马 就 显示 不 全 了 ， 因 为 元 素 被 滚 走 了 ， 但 是 背 
景 图 还 是 固定 的 。 如 图 9-9 所 示 。 

而 绝 大 多 数 网 页 都 是 可 深 动 的 ， 这 束 让 background— 
attachment :fixed 只 能 局 限于 窗 体 背景 图 的 使 用 上 。 当 9-9 页 面 滚动 时 候 ， 背 景 定 位 完 
然 , 也 有 不 太 好 的 文 持 方 法 , 驳 是 background-attachment: 全 不 合乎 预期 
fixed 交互 做 出 一 个 独立 的 小 页 面 ， 然 后 主页 面 使 用 一 个 小 的 iframe 舱 套 。 

IE9 及 以 上 版 本 浏览 右 新 增 了 一 个 background- attachment 属性 值 Jocal1， 难 道 它 束 是 用 
来 解决 上 面 的 “不 合乎 预期 ”的 现象 的 ? 不 好 意思 ， 你 想 多 了 ， 它 们 不 是 一 路 的 。Local 的 作用 是 ， 
如 果 .pox 元素 可 以 滚动 , 则 .lbox 元 素 的 背景 图 也 可 以 被 深 走 ,默认 的 scroll 值 是 固定 的 ,和 fixed 
无 半点 儿 关系 。 


9.2.5 background-color 背景 色 水 远 是 最 低 的 


什么 意思 呢 ? 了 束 是 packground 无 论 是 单 背景 图 还 是 多 背景 图 ， 背 景色 一 定 是 在 最 
辰 下 的 位 置 。 知 道 这 一 特性 有 什么 作用 呢 ? 为 了 及 时 准确 反馈 用 户 的 点 击 行 为 ,我们 会 在 
链接 或 按钮 元 闵 上 增加 :active 样式 ， 通 常 的 思路 是 :active 时 变换 一 下 背景 色 ， 但 是 
这 样 有 一 个 很 大 的 问题 ， 即 每 个 按钮 的 背景 色 都 是 不 一 样 的 ， 那 忆 不 是 要 写 很 多 
个 :active 样式 ?有 没有 什么 整 站 通用 的 简单 代码 呢 ? 当然 有 。 我 们 可 以 试 试 使 用 背景 
图 厂 代 普 背 景色 s 例如 : 


a[lhrefl:active, button:active { 



























































background-image: linear-gradient (to top, rgba(0,0,0,.05), rgba(0,0,0,.05)); 
} 


因为 背景 色 一 定 是 在 最 底下 的 位 置 ， 所 以 这 里 的 background-image 一 定 是 窗 新 在 按钮 等 元 
素 背 景色 之 上 的 ， 不 会 影响 按钮 原来 的 背景 色 。 

如 果 是 桌面 端 Web 项 目 ， 需 要 兼容 IE8 和 IE9 浏览 器 ， 我 的 建议 是 使 用 一 个 同等 效果 的 
PNG 图 乒 代 蔡 ， 有 具体 代码 如 下 : 


a[href]l:active， button:active { 

/* IE8, IE9 */ 

background-image: url (data:image/png;base64,iVBORwWwOKGgoAAAANSUNEUgAAAAOAAAAKCAY 
AAACNMs+9AAAAGXRFWHRTIP2Z0d2FyZQBBZG9iZSBJPWFNZVJl1YWRDCClT1PAAAABNJREFUeNp1iZGBg4Gug 
AjCOKqSvQOoOAAAWB65ACNoFNUMwAAAABJRUS5ErkJggg==); 

/* IE10+ */ 

background-image: linear-gradient (to top, rgba(0,0,0,.05), rgba(0,0,0,.05)); 
} 
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大 功 告 成 ! 
9.2.6 利用 多 背景 的 属性 hack 小 技巧 


虽然 了 8 浏览 强 并 不 文 持 多 背景 ， 但 是 并 不 表示 IE8 浏 贤 右 和 多 背景 效 来 无 缘 。 因 为 IE8 
浏览 器 文 持 :before 和 :after 两 个 伪 元 素 ， 所 以 配合 z-index 负 值 ， 我 们 可 以 实现 最 多 3 
个 图 片 的 多 背景 效果 ， 对 绝 大 部 分 的 需求 来 说 足够 了 。 

另外 ， 我 们 还 可 以 利用 多 背景 来 区 分 特定 的 浏览 器 。 举 个 例子 ，IE9 是 支持 SVG 背景 图 片 
的 ， 但 IE8 不 文 持 ， 于 是 我 们 可 以 让 IE8 浏览 吉 加 载 PNG 图 乒 ， 而 IE9 及 以 上 版 本 浏览 问 加 载 
SVG 图 片 ， 这 样 就 不 用 使 用 烦人 的 多 倍 图 了 。 下 面 问题 来 了 ， 如 何 有 效 地 区 分 IE8 和 正 9 浏览 
售 呢 ? 

常用 的 :root .ie9 {} hack 技巧 会 提高 元 素 的 权重 ， 并 不 是 一 个 完美 的 方法 ， 而 巧 用 一 
些 CSS3 属性 或 属性 值 做 兼容 处 理 则 是 上 乘 的 技术 策略 。 例 如 ， 这 里 不 可 以 这 样 处 理 : 


.bg { 
background: url(icon.png); 




















background: url(icon.svg), none; 


} 

IE8 浏览 器 不 认识 多 背景 的 写法 ， 目 然 会 忽略 第 二 行 声 明 ， 只 认 第 一 行 的 PNG 背景 ，IE9 
及 以 上 版 本 浏览 嚣 则 会 使 用 后 面 的 声明 使 用 SVG 图 片 。 

趁 热 打铁 , 请问 如 果 要 区 分 IE9 及 以 下 版 本 和 IE10 及 以 上 版 本 ， 该 怎么 办 呢 ? 我 们 可 以 这 
么 处 理 : 


.bg { 
background: url (loading.9g1if);} 
background: url (loading.png), linear-gradient (to top, transparent, transparent),;} 


} 
IE9 不 认识 CSS3 渐变 ， 因 此 会 忽略 第 二 行 CSS 声明 。 
9.2.7 ”渐变 背景 和 rgba 背景 色 的 兼容 处 理 


IE9 浏览 右 不 文 持 背景 渐变 ， 不 过 ， 也 是 有 手段 可 以 做 兼容 的 ， 那 束 是 使 用 下 私有 的 渐变 
小 镜 。 例 如 ， 一 个 红 蓝 渐变 ， 可 以 使 用 下 面 的 代码 : 


filter: progid:DXImageTransform.Microsoft .gradient (startcolorstr=red, endcolorstr= 











blue, gradientType=1); 


这 行 滤 镜 代码 主要 有 3 个 参数 ， 依 次 是 startcolorstr、endcolorstr 和 gradient Type。 
其 中 gradientType=1 代表 横 问 渐变 ，gradientType=0 代表 纵 回 淅 渐变 ，startcolorstr 
代表 渐变 起 始 的 色彩 。 除 了 使 用 颜色 关键 字 ， 还 可 以 使 用 十 六 进 制 颜色 表示 法 ， 如 
startcolorstr=#FE0000; endcolorstr 代表 渐变 结尾 的 色彩 ， 也 文 持 十 六 进 制 颜色 表示 
法 ， 如 endqcolLorstr=#0000FF。 
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想 要 渐变 半 透 明 怎 么 办 ? 可 以 使 用 IE 浏览 器 的 8 字符 的 十 六 进 制 颜 色 表 示 法 ， 其 格式 为 
#AARRGGBB，AA、RR、GG、BB 均 为 十 六 进 制 正 整数 ， 取 值 范围 为 00 一 FF。RR 指定 红色 值 ， 
GG 指定 绿色 值 ，BB 指定 赣 色 值 ，AA 指定 透明 度 。00 表示 完全 透明 ，FF 表示 完全 不 透明 。 超 
出 取 值 范围 的 值 将 被 恢复 为 默认 值 。 例 如 ， 渐 变 起 始 红 色 可 以 写成 startcolorstr= 
#FFFFOOOO。 

有 些 人 并 不 清楚 如 何 将 0 一 1 的 CSS3 标准 透明 度 值 转换 成 十 六 进 制 。 事 实 上 ， 可 以 这 样 处 
理 : 打开 浏览 器 控制 台 ， 假 设 需要 转换 的 透明 度 是 opacity， 则 可 以 输入 下 面 的 代码 再 回 车 : 


Math.round(256 * opacity) .toString(16); 


综 上 所 述 ， 要 想 实现 一 个 100% 红 色 到 $0% 透 明度 赣 色 垂直 渐变 ， 可 以 使 用 如 下 代码 组 合 : 











.gradient { 
filter: 


progid:DXImageTransform.Microsoft.gradient (startcolorstr=#FFFFOO000,endcolorstr=#7 
FOOOOFF,gradientType=0);} 


background: linear-gradient (to bottom, red, rgba(0,0,255,.5)); 
lL 
IE8 浏览 器 不 文 持 rgba 半 透 明 背 景色 ， 除 了 使 用 PNG 图 片 外 ， 也 可 以 使 用 渐变 小 镜 来 羔 
容 。 例 如 ， 要 实现 50% 半 透明 的 黑色 背景 ， 可 以 这 样 做 : 








.bgcolor { 
background: rgba(0,0,0,.5); 
filter: progid:DXImageTransform.Microsoft .gradient (startcolorstr= 
#7FO00000,endcolorstr=#7F000000)， 
} 
:root .bgcolor { 
filter: none; 


} 


让 渐变 起 始 色 和 结束 色 保 持 一 致 ， 束 可 以 实现 纯 半 透明 背景 色 效 果 了 。 在 IE9 浏览 器 下 ，rgba 
半 透 明和 filter 渐变 会 同时 起 作用 ， 因 此 使 用 :root 选择 喜 重 置 了 一 下 。 
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使 用 CSS 让 元 素 不 可 见 的 方法 很 多 ， 甬 裁 、 定 位 到 屏 硕 外 、 明 上 度 变 化 等 都 是 可 以 的 。 虽然 
它们 都 是 肉眼 不 可 见 ， 但 背后 却 在 多 个 维度 上 都 有 差别 。 
下 面 是 我 总 结 的 一 些 比较 好 的 隐藏 实践 。 

















如 采 和 希望 元 素 不 可 见 ， 同 时 不 占据 空间 ， 辅 助 设备 无 法 访问 ， 同 时 不 演 染 ， 可 以 使 用 
<script> 标 签 隐 藏 。 例 如 : 


<script type="text/ntml"> 
<img src="1.jpg"> 
</script> 


此 时 ， 图 片 1. jpg 是 不 会 有 请 求 的 。<script> 标 签 是 不 支持 舱 套 的 ， 因 此 ， 如 果 希 望 在 
<script> 标 签 中 再 放置 其 他 不 演 染 的 模板 内 容 ， 可 以 试 试 使 用 <textarea> 元 素 。 例 如 : 


<script type="text/ntml"> 





<img src="1.jpg"> 
<textarea style="display:none;"> 
<img src="2.jpg"> 
</textarea> 
</script> 


图 片 2.jpg 也 是 不 会 有 请 求 的 。 

男 外 ，<script> 标 签 隐 藏 内 容 获 取 使 用 script .innerHTML，<textarea> 使 用 
textarea.value。 

如 果 希 望 元 系 不 可 见 ， 同 时 不 占据 空间 ， 辅 助 设备 无 法 访问 , 但 资源 有 加 载 ,DOM 可 
访问 ， 则 可 以 直接 使 用 display:none 隐藏 。 例 如 : 

| 


display: none; 


} 
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如 果 和 硕 望 元 率 不 可 见 ， 同 时 不 占据 空间 ， 辅 助 设备 无 法 访问 ， 但 显 隐 的 时 候 可 以 有 
transition 淡 入 淡出 效果 ， 则 可 以 使 用 : 
.hiadaqen { 
position: absolute; 
visibility: hidden; 
} 


如 果 和 希望 元 素 不 可 见 ， 不 能 上 点击， 辅助 设备 无 法 访问 ， 但 占据 空间 保留 ， 则 可 以 使 用 
visibility:hidden 隐藏 。 例 如 : 








.Vvh { 
visibility: hidden; 
} 


如 果 希 望 元 系 不 可 见 ， 不 能 点 击 ， 不 占据 空间 ， 但 键盘 可 访问 ， 则 可 以 使 用 clip 筋 
裁 隐藏 。 例 如 : 


.Clip { 

















Position: absolute; 
clip: rect(0 0 0 0);，; 
} 
.Out { 
position: relative; 
left: 999em; 
} 


如 条 硕 望 元 了 素 不 可 见 ， 不 能 反击 , 但 占据 空间 , 且 键 盘 可 访问 , 则 可 以 试 试 relative 
隐藏 。 例 如 ， 如 末 条 件 允 许 ， 也 就 是 和 层 舍 上 下 文 之 间 存 在 设置 了 背景 色 的 父 元 素 ， 
则 也 可 以 使 用 更 友好 的 z-index 负 值 隐藏 。 例 如 : 


.lower { 














position: relative; 
z-index: -1;} 


} 
如 宋 硕 望 元 素 不 可 见 ， 但 可 以 点 击 ， 而 且 不 占据 空间 ， 则 可 以 使 用 透明 度 。 例 如 : 


.opacity I 














position: absolute; 

opacity: 0; 

filter: Alpha (opacity=0); 
} 


如 果 单 纯 希 望 元 素 看 不 见 ， 但 位 置 保 留 ， 依 然 可 以 点 可 以 选 ， 则 直接 让 透明 度 为 0。 
例如 : 


.opacity I 














opacity: 0; 
filter: Alpha (opacity=0); 
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读者 可 以 根据 实际 的 隐藏 场景 选择 合适 的 隐藏 方法 。 不 过 ， 实 际 开发 场景 干 变 万 化 ， 上 面 
罗列 的 实践 不 足以 敢 盖 全 部 情形 。 例 如 ， 在 标签 受 限 的 情况 下 硕 望 隐藏 茶 文 字 ， 可 能 使 用 
text-indent 缩 进 是 最 友好 的 方法 。 如 果 和 希望 显示 的 时 候 可 以 加 一 个 上 transition 动画 ,， 束 
可 能 要 使 用 max-height 进行 隐藏 了 。 例 如 : 


.hidden { 
max—-height: 0; 











overflow: hidden; 


} 
此 案例 在 3.3 节 的 max-height 部 分 己 有 展示 ， 这 里 就 不 多 说 了 。 
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对 一 个 元 素 而 言 ， 如 果 display 计算 值 是 none 则 该 元 际 以 及 所 有 后 代 元 头 都 隐藏 ， 如 
果 是 其 他 qi splay 计算 值 则 显示 。 

display 可 以 说 是 Web 显 隐 交 互 中 出 场 频率 最 高 的 一 种 隐藏 方式 , 是 真正 意义 上 的 隐藏 ， 
干 韶 利沙。 人们 对 它 的 认识 也 比较 准确 ， 无 法 点 击 ， 无 法 使 用 屏 大 阅读 占 等 辅助 设备 访问 ， 占 据 
的 空间 消失 ， 但 很 多 人 束 仪 局 限于 此 了 ， 实际 上 ， display:none 的 故事 并 不 只 有 这 么 一 点 点 。 

在 Firefox 浏览 器 下 ，display :none 的 元 素 的 background-image 图 片 是 不 加 载 的 ， 
包括 父 元 和 素 display :none 也 是 如 此 ; 如 果 是 Chrome 和 Safari 浏览 器 ， 则 要 分 情况 ， 寿 父 元 
系 display :none， 图 片 不 加 载 ， 奋 本 和 嘲 背 景 图 所 在 元 素 隐 藏 ， 则 图 片 依旧 会 去 加 载 ， 对 正 
浏览 颖 而 言 ， 无 论 怎 样 都 会 请 求 图 厂 资 源 。 

CSS 和 HTML 代码 如 下 : 




















.bgl { 

background: url(1.png); 
} 
.bg2 { 

background: url(2.png); 
} 


<div hidden class="bgl"></div> 
<div hidden><div class="bg2"></div></div> 


在 Chrome 浏览 右 下 的 网 络 请 求 如 网 10-1 
所 示 。 

我 们 发 现 只 加 载 『 1.png， 因 此 ， 在 实际 
开 友 的 时 候 ， 如 头 图 辊 播 切 换 效 果 ， 那些 默认 需 
要 隐 叫 的 图 片 作 为 背景 图 疡 在 隐 汤 元 素 的 子 元 
系 上 ,微小 的 改动 束 可 以 明显 提升 页 和 面 的 加 载体 
验 ， 可 以 说 是 非常 实用 的 小 技巧 。 











[入 号 驻 


态 外 ， 如 条 不 是 packground-image 图 图 10-1 Chrome 浏览 左下 图 万 请 求 
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片 ， 而 是 <img> 元 素 ， 则 设置 display:none 在 所 有 浏览 器 下 依旧 都 会 请 求 图 片 资源 。 
照 理 说 ， display:none 的 元 素 应 该 是 无 法 被 点 击 的 ， display:none 可 以 非常 彻底 地 
隐 妃 ， 表 定 不 能 点 击 啊 ! 但 是 ， 下 面 这 种 情况 却 例外 : 


<form> 





<input id="any" type="submit" style="display:none;™"> 
<label for="any"> 提 交 </label> 
</form> 


此 处 submit 类 型 的 “提交 ”按钮 设置 了 qisplavy:none， 但 是 当 我 们 上 点击 “提交 ”的 
时 候 ， 隐 藏 的 按钮 依然 会 触发 click、 触 友 表 单 提交 ， 此 现象 出 现在 正 9 及 以 上 版 本 浏览 絮 以 
及 其 他 现代 浏览 器 中 。 

设置 display :none 的 意义 在 于 ， 当 按钮 和 <labe1l> 元 素 不 在 一 个 水 平 线 上 的 时 候 ， 点 
击 <Llabe1> 元 素 不 会 触发 销 点 定位 。 但 是 我 并 不 推荐 这 么 做 ， 因 为 submit 按钮 会 去 失 键 盘 可 
访问 性 。 

HTML 中 有 很 多 标签 和 属性 天 然 display:none,， 如 <style>、<script> 和 HTML5 
中 的 <aialog> 元 素 〈 如 果 浏 览 句 文 持 )。 如 果 这 些 标签 在 <bodqy> 元 系 中 ， 设 置 display: 
block 是 可 以 让 内 联 CSS 和 JavaScript 代码 直接 在 页 面 中 显示 的 。 例 如 : 

<style style="display:block;"> 


.1 { float: left; } 
</style> 








页 面 上 束 会 出 现 .1 { float: left; } 的 文本 信息 ; 如 果 再 设置 contenteditable= 
"true"， 在 有 些 浏 览 器 下 (如 Chrome)， 甚 至 可 以 直接 实时 编辑 预览 页 面 的 样式 。 
还 有 一 些 属性 也 是 天 然 display:none 的 。 例 如 ，hiqdden 类 型 的 <input> 输 入 框 : 








<input type="hidden" name="id" value="1"> 


专门 用 来 放置 类 似 token 或 者 id 这 样 的 隐藏 信息 ， 这 也 说 明 表 单元 素 的 显示 与 隐藏 并 不 影 啊 
数据 的 提交 ， 其 真正 影响 的 是 disabled 属性 。 
HTMLS 中 新 增 了 nidden 这 个 布尔 属性 ， 可 以 让 元 素 天 生 display :none 隐藏 。 例 如 : 


<div hidden> 看 不 见 我 </div> 
IE11 以 及 其 他 现代 浏览 器 都 支持 它 ， 因 此 ， 如 果 要 兼容 桌面 端 ， 需 要 如 下 CSS 设置 : 


[hidden] { 
display: none; 


} 

display:none 显 隐 控制 并 不 会 影响 CSS3 animation 动画 的 实现 ， 但 是 会 影响 CSS3 
transition 过 疲 效 果 执 行 ， 因 此 transition 往往 和 visibility 属性 走 得 比较 近 。 

对 于 计数 器 列表 元 素 ， 如 果 设 置 display :none， 则 该 元 素 加 入 计数 队列 。 举 个 例子 ，10 
个 列表 从 1 开始 递增 , 假设 第 二 个 列表 设置 了 display :none, 则 原来 的 第 三 个 列表 计数 变 成 
2， 最 后 总 计数 是 9。 
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10.2 visibility 与 元 素 的 显 隐 


10.2.1 不 仅仅 是 保留 空 昌 这 么 向 单 
有 一 些 人 简单 地 认为 display:none 和 visibility:hidden 两 个 隐 叫 的 区 别 束 在 于 : 
display :none 隐藏 后 的 元 素 不 占据 任何 空间 ， 而 visibility:hidden 隐藏 的 元 素 空 间 依 
旧 人 保留。 实际 上 并 没有 这 么 简单 ，visibility 是 一 个 非常 有 故事 的 属性 。 
1. visibility 的 继承 性 
首先 , 它 最 有 意思 的 一 个 特点 束 是 继承 性 。 父 元 素 设置 Visibility:hidden, 于 元 关 也 
会 看 不 见 ， 究 其 原因 是 继承 性 ， 子 元 素 继承 了 visibility:hidden， 但 是 ， 如 果子 元 素 设置 
了 visibilitvy:visible， 则 子 元 素 又 会 显示 出 来 。 这 个 和 display 隐藏 有 着 质 的 区 别 。 
我 们 看 一 个 例子 来 切实 感受 一 下 ，HTML 代码 如 下 : 
<ul style="visibility:hidden;"> 
<1Li style="visipbility:visipble;"> 列 表 1</1i> 
<1i> 列 表 2</1i> 
<1i> 列 表 3</1i> 


<1i style="vigibility:visible;y "> 列表 4<71iS 
</ul> 


列表 父 元 素 visibility:hiddqen， 于 万 不 要 想当然 地 认为 此 时 所 有 
子 元 系 就 都 不 可 见 了 ， 最 终 效 果 如 图 10-2 所 示 ,“ 列 表 1” 和 “列表 4” 依旧 
清晰 可 见 。 

眼见 为 实 ， 手 动 输 入 http://demo.cssworld.cn/10/2-1.php 或 者 扫 右 侧 的 二 
维 码 。 

这 种 visibility:visible 后 代 可 见 的 特性 ， 在 实际 开发 的 时 候 非 常 有 用 。 例如， 它 可 
以 让 异步 加 载 时 体验 更 好 。 举 个 我 上 周 项 目 中 遇 到 的 案例 ， 使 用 头像 上 传 功能 ， 上 传 完 毕 要 进 
入 能 裁 界面 ， 界 面 如 图 10-3 所 示 。 












































夫 尺 二 预览 


蔓 坊 下 二 
中 尺 才 预览 
。 列表 1 
和 -尺寸 预览 
。 列 去 4 EYW ETH 
图 10-2 visibility 继承 性 演示 效果 图 10-3 ”剪裁 界面 示意 


这 里 就 有 一 个 噶 步 的 过 程 ， 后 端 只 返回 了 一 个 图 片 地 址 ， 我 们 需要 移动 态 获取 图 片 太 寸 ， 
再 去 计算 ， 以 便 准 确 显示 缩 略 效果 以 及 初始 化 甬 裁 功能 。 比 较 差 一 点 儿 的 方法 就 是 先 用 默认 头 
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像 占 位 ， 等 获取 到 图 请 尺寸 后 再 符 换 ， 或 者 倍 助 visibility 属性 。 

模块 外 部 容器 设置 visibility:hiddqen， 前 裁 区 域 里 面 放 一 个 加 载 效果 ， 设 置 
visibility:visible。 图 片 尺寸 获取 成 功 后 , 再 正常 初始 化 , 然后 让 外 部 容器 visibility 
属性 重 置 为 visible。 这 样 体验 就 会 好 很 多 ,用户 只 会 看 到 “加 载 中 一 筋 裁 界 面 ?>， 而 不 是 “此 
位 界面 一 加 载 中 一 最 终 操作 界面 ”。 

HTML 示意 如 下 : 








<div style="visibility:hidden;"> 
<div class="main-box"> 
<div class="operate-box"> 
<i class="icon-loading" style="visibility:visible;"> 
加 载 中 ... 
</i> 
</div> 
<div class="button-box"> 
<button> 确 定 </button> 
<button> 取 消 </button> 
</div> 
</div> 
<div class="preview-box"> 
大 ; “中 二 小 预 多 图 
</div> 
</div> 


2. visibility 与 CSS 计数 器 
visibility:hidden 不 会 影响 计数 器 的 计数 ， 这 和 display :none 完全 不 一 样 。 举 个 
例子 ， 如 下 CSS 和 HTML 代码 : 


.Vvh { 
visibility: hidden; 

lj 

.dn { 
display: none; 

; 

ol { 
border: lpx solid; 
margin: lem 0; 
Counter-reset: test,; 

} 

li:after { 
Counter-increment: test,; 
content: counter (七 es 七 ) ; 

} 

<ol> 
<1i> 列 表 </1i> 
<l1i class="dn"> 列 表 </1i> 
<1i> 列 表 </1i> 
<1i> 列 表 </1i> 
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</o1> 

<ol> 
<13S 现 六 迟 ]113 
<1i class="vh"> 列 表 </1i> 
<1i> 列 表 </1i> 
<1i> 列 表 </1i> 

</ol1> 


结果 如 图 10-4 所 示 。 

可 以 看 到 ， Visibility:hidden 里 然 让 其 中 一 个 列 
表 不 可 见 了 ， 但 是 其 计数 效果 依然 在 运行 。 相 比 之 下 ， 设 置 10-4 _ visibility 和 aisplay 
display :none 的 列表 吏 完 全 没有 参与 计数 运算 。 隐藏 与 CSS 计数 器 效 末 

3. visibility 与 ransition 

下 面 的 CSS 是 会 让 .box 元 素 hover 时 显示 .target 子 元 素 ， 但 不 会 有 过 渡 效 果 : 














.box > .target { 
display: none; 
position: absolute; 
opacity: 0; 
transition: opacity .258s; 
} 
.box:hover > .target { 
display: block; 
opacity: 1; 
| 


但 是 ， 下 面 的 CSS 语句 却 可 以 让 .target 子 元 素 有 淡出 的 过 渡 效 果 : 


.box > .target { 
position: absolute; 
opacity: 0; 
transition: opacity .258s; 
visibility: hidden; 

} 

.box:hover > .target { 
visibility: visible; 
opacity: 1; 

} 


这 是 为 什么 昵 ? 因为 CSS3 transition 支持 的 CSS 属性 中 有 visibility， 但 是 并 没 
有 display。 

由 于 transition 可 以 延 时 执行 , 因此 ,和 visibility 配合 可 以 使 用 纯 CSS 实现 hover 
延 时 显示 效果 ， 由 此 提升 我 们 的 交互 体验 。 

图 10-5 所 示 是 一 个 很 常见 的 hover 旦 浮 显 示 列 表 效 果 ， 而 且 有 多 个 触发 点 相 令 ， 对 于 这 
种 hover 交互 ， 如果 在 显示 的 时 候 增 加 一 定 的 延 时 ， 可 以 避免 不 经 意 触 倍 导致 履 冰 目 标 元 又 的 
问题 。 例 如 ， 图 10-5 虽然 显示 的 是 第 一 行 的 下 拉 列 表 ， 但 真相 即 可 能 是 : 我 本 来 想 去 hover 
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第 二 行 的 “操作 ”文字 ， 但 是 由 于 鼠标 光标 移动 路 径 不 小 心经 过 了 第 一 行 的 “操作 ”， 结果 把 第 
二 行 本 来 nover 的 “操作 ” 履 盖 了 ， 必 须 重 新 移出 去 ， 避 开 干 扰 元 素 ， 重 新 hover 才 行 。 如 





此 一 来 ， 体 验 就 不 好 了 。 EE es a 
但 是 有 了 visibility 属性 和 transition 延 时 , 我 Bl 栏目 2 Nn 

们 就 可 以 把 这 种 不 悦 的 体验 消除 掉 ， 关 键 的 HTML 和 CSS 

代码 如 下 : 10-5 ”hover 显示 列表 示意 
<td> 


<a href> 拘 作 v</a> 
<div class="]list"> 
<a href> 编 辑 </a> 
<a href> 删 除 </ay> 
</div> 
</td> 
lst | 
position: absolute; 
visibility: hidden; 
} 
td:hover .list f{ 
visibility: visible; 
transition: visibility Os .28s; 


} 


transition 在 hover 时候 声 明 可 以 让 鼠标 光标 移出 的 时 候 列 表 无 延 时 地 迅速 隐藏 。 

有 了 上 面 的 CSS 处 理 ， 当 我 们 鼠标 光标 奔 回 第 二 行 的 “操作 ”按钮 ， 但 不 小 心经 过 第 一 行 
“操作 ”按钮 时 ， 束 不 会 发 生 瞬 间 出 现 列 表 而 履 盖 目标 元 系 的 问题 了 。 大 家 可 以 手动 输入 
http://demo.cssworld.cn/10/2-3.php 这 个 地 址 杀 目 感受 一 下 。 

transition 隐藏 除了 和 transition 友好 外 ,与 display:none 相 比 ,其 在 JavaScript 
侧 也 更 加 友好 。 存 在 这 样 的 场景 : 我 们 需要 对 隐藏 元 素 进 行 太 寸 和 位 置 的 获取 ， 以 便 对 交互 布 
局 进行 精准 定位 。 此 时 ， 建 议 使 用 visibility 隐藏 : 


.hidden { 


position: absolute; 

















visibility: hidden; 
} 


原因 是 ,我们 可 以 准确 计算 出 元 素 的 尺寸 和 位 置 ， 如 果 使 用 的 是 display :none， 则 无 论 
是 尺寸 还 是 位 置 都 会 是 0, 计 算 束 会 不 准确 ,例如 ,假设 element 是 页 面 上 某 个 display :none 
隐藏 元 素 DOM 对 象 ， 则 : 


console.log('clientWidth: ' + element .clientWidth),; 
console.log('clientHeight: ' + element .clientHeight); 
console.log('clientLeft: ' + element.clientLeft),;} 
console.log('clientTop: ' + element .clientTop); 


console.dir(element .getBoundingClientRect () ) ， 
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结果 会 如 图 10-6 显示 的 那样 全 部 都 是 0。 

不 仅 如 此 ,transition 隐藏 在 无 障碍 访问 这 一 
块 也 比 display:none 更 友好 些 。 举 个 例子 ， 对 于 
一 个 点 击 遮 单 层 就 隐藏 遮 单 层 的 交互 ， 很 多 人 可 能 是 
这 么 实现 的 : 





overlay.onclick = function () { 





this.style.display = 'none'; 
四 图 10-6 display :none 元 素 尺 寸 和 
如 果 不 考虑 无 障碍 访问 ， 这 么 实现 也 算 干脆 利落 ; 位 置 计算 值 全 部 郑 古 0 
但 如 采 要 莱 顾 无 隐 碍 访问 ， 则 使 用 aisplay:none 了 束 没 有 使 用 visibility 友好 了 了。 
视觉 障碍 用 户 对 页 面 状态 变化 都 是 通过 声音 而 非 视 党 感知， 因此， 就 有 必要 告知 准确 的 状 
态 信息 。 下 面 就 是 遮 尝 浮 层 的 一 些 描述 ， 显 示 时 和 隐藏 时 分 别 如 下 : 
<div class="overlay" role="button" title=" 点 击 关 闭 浮 层 "></div> 
<div class="overlay hidden" role="button" title=" 浮 层 已 关闭 "></div> 


以 iPhone 的 VoiceOver 为 例 ， 如 果 .higqden 语句 是 这 样 的 : 




















.hiadaqen { 
visibility: hidden; 
} 
那么 当 我 们 关闭 浮 层 时 ，VoiceOrver 会 读 “ 译 层 已 关闭 ”， 很 棱 ， 对 不 对 ? 但 是 ， 如 果 .hidden 
语句 是 这 样 的 : 
.hidden { 


display: none; 


} 
那么 当 我 们 关闭 浮 层 时 候 ，VoiceOver 会 恋 浮 层 下 面 元 系 的 相关 信息 , 全 于 .overlay 元 素 是 否 
关闭 ， 束 只 能 徘 经 验 去 猜测 了 ， 这 显然 束 不 如 visibility 友好 。 

上 而 的 案例 我 特意 做 了 一 个 演示 页 面 ， 如 果 读 者 有 屏幕 阅 读 软 件 ， 可 以 手动 输入 
http://demo.cssworld.cn/10/2-4.php 或 者 扫 右 侧 的 二 维 人 码 。 

最 后 ， 有 必要 强调 一 下 可 能 出 现 的 误区 。 

(1) 普通 元 系 的 title 属性 是 不 会 被 明 读 的 ， 除 非 辅 以 按钮 等 控件 元 
素 ， 这 里 是 因为 设置 了 role="button" 上 所 以 才 可 以 明 读 。 


























本 案例 之 所 以 会 被 表 读 ， 从 显示 到 隐藏 ， 氮 日 层 focus 的 区 域 还 在 (daisplay:none 则 丢失 ， 
因为 尺寸 位 置 全 部 变 成 0)， 你 可 以 理解 为 遮 音 层 的 “直通 ”还 在 。 

明 读 结束 后 再 去 触 肆 这 片区 域 的 时 候 ， 是 无 论 如 何 也 找 不 到 已 经 visibility:hidden 
的 这 个 庶 单 元 系 的 。 
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10.2.2 了 解 visibilLity:coLlLapse 


大 家 只 要 了 解 visibility 文 持 的 属性 值 还 有 个 collapse 就 可 以 了 。 其 他 信息 ， 类 似 
原本 其 设计 是 作为 表格 用 的 ， 则 完全 不 用 在 意 ， 因 为 对 于 表格 相关 元 素 ， 部 分 现代 浏览 器 对 
visibility:collapse 的 解析 是 不 准确 的 ， 无 实用 价值 ， 对 于 普通 元 素 ，visibility: 
collapse 又 等 同 于 visibility:hidden， 直 接 使 用 visibility:hidden 束 好 了 ， 
collapse 这 个 单词 又 长 又 难 记 住 ， 没 有 理由 使 用 。 
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用 户 界面 样式 指 的 是 CSS 世界 中 用 来 帮助 用 户 进行 界面 交互 的 一 些 CSS 样式 ， 主 要 有 


outline 和 cursor 等 属性 。 


1L1L 和 border 形似 的 outline 属性 


outline 表示 元 隶 的 轮廓 ， 语 法 和 porder 属性 非常 类 似 ， 分 宽度 、 
的 关键 字 和 属性 值 与 border 属性 一 模 一 样 。 例 如 : 
.outline { 


outline: lpx solid #000; 
} 


两 者 表现 也 类 似 ， 痢 是 给 元 系 的 外 面 画 框 。 但 是 ， 设 计 的 作用 却 大 相 径 姓 。 


11.1.1 万 万 不 可 在 全 局 设置 outline:0 none 


outline 是 一 个 和 用 户 体 验 密切 相关 的 属性 ， 与 focus 状态 以 及 键盘 访问 关系 密切 。 

在 时 面 问 网 页 ， 对 于 按钮 或 者 链接 ， 我 们 通常 都 是 使 用 鼠标 点 击 去 完成 操作 。 但 是 世事 难 
料 ， 总 会 存在 用 户 只 能 使 用 键盘 访问 网 站 的 情况 。 例 如 ， iMac 鼠标 没 电 了 ， 或 者 鼠标 坏 了 ， 
或 者 在 智能 电视 中 访问 网 站 《遥控 髓 本 质 上 也 是 个 操作 键盘 )。 

好 在 所 有 的 浏览 右 原 生 就 有 键盘 访问 网 页 的 能 力 , 对 于 按钮 或 者 链接 , 通常 的 键盘 操作 是 : 
Tab 键 按 次 序 不 断 focus 控件 元 素 ， 包 括 链接 、 按 钮 、 输 入 框 等 表单 元 素 ， 或 者 focus 设置 
了 tabindex 的 普通 元 素 ， 按 Shift+Tab 组 合 键 反 方向 访问 。 

注意 ， 重 点 来 了 ! 在 默认 状态 下 ， 对 处 于 focus 状态 的 元 素 ， 浏 览 器 会 通过 虚 框 或 者 外 
发 光 的 形式 进行 区 分 和 提示 。 例 如 ， 在 Chrome 浏览 器 中 输入 框 focus 时 的 蓝 色 外 框 效 果 ， 如 
图 11-1 所 示 。 


位 


型 和 颜色 ， 支 持 
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这 种 虚 框 或 者 外 发 光 效果 是 非常 有 必要 的 ， 否 则 用 户 根 本 就 不 知道 自己 当前 聚焦 在 哪个 元 
素 上 ， 甚 至 因此 而 迷失 。 pe 

元 素 聚 焦 后 ， 再 按 下 回 车 键 , 就 相当 于 鼠标 点 击 了 这 个 
元 素 ， 从 而 可 以 前 往 我 们 想 去 的 目的 地 (如 <a> 链 接 ), 或 者 图 11-1 Chrome 输入 框 focus 

mn 0 > 时 候 的 赣 色 外 框 效果 

执行 我 们 想 要 的 交互 效果 (如 按钮 )。 

以 上 就 是 我 们 的 键盘 访问 过 程 。 可 以 看 出 来 ， 浏 览 器 默认 的 out 1ine 高 亮 标 记 是 一 个 非 
常 有 用 的 行为 。 因 此 ， 类 似 下 面 的 代码 其 实 是 非常 不 专业 的 : 

* 1 


outline: 0 none; 


} 





























或 


a i 
outline: 0 none; 


} 

现代 浏览 器 的 focus 体验 现在 已 经 做 得 很 好 了 ， 对 于 普通 链接 或 者 按钮 ， 当 我 们 点 击 的 
时 候 ， 已 经 不 会 出 现 outline 效果 了 ， 只 有 键 往 Tab 或 者 JavaScript 的 element .focus () 
主动 触发 才 会 有 发 光 效 果 ， 因 此 ， 我 实在 想 不 出 为 什么 要 设置 下 面 这 样 的 CSS 代码: 


a { 





outline: 0 none; 


} 
对 于 输入 框 元 素 ， 我 倒是 可 以 理解 ， 因 为 必须 要 先 focus 才能 输入 内 容 ， 一 些 浏 览 占 内 
置 的 focus 效果 可 能 和 我 们 的 网 页 设计 格格 不 入 ， 因 此 需要 重 置 ， 要 使 用 专门 的 闫 名。 例如 : 


.input { 
outline: 0; /* outline:none 证 可 */ 


} 
但 是 ， 必 须 把 focus 态 样 式 加 上 。 例 如 ， 我 们 可 以 让 输入 框 的 边框 闫 色 蜗 融 : 








.input:focus { 
border-color: Highlight; 
} 


最 后 再 强调 一 过 : 万 万 不 可 在 全 局 设置 outline:0 none! 这 样 的 错误 会 造成 部 分 场景 
下 的 部 分 用 户 产 生 使 用 障碍 ! 

国内 很 多 大 站 也 会 犯 类 似 的 错误 ， 注 意 干 万 不 要 学 习 ， 于 万 不 要 模仿 ! 

在 实际 开 及 的 时 候 ， 有 时 候 需 要 让 普通 元 素 有 类 似 控件 元 又 的 outline 效果 。 例 如 ， 
基于 原生 的 单 复 选 框 模拟 单 复 选 枉 ， 或 者 为 了 规避 submit 类 型 按钮 UI 很 难 完全 保持 一 致 
的 问题 ， 我 们 会 使 用 <labe1l> 元 系 来 移花接木 ， 通 过 for 属性 和 这 些 原 生 的 表单 控件 相关 
联 。 例 如 : 
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<input id="t" type="submit"> 
<label class="pbtn" for="t"> 提 区 </lapbel> 


原始 按钮 不 可 见 ，<l1abe1l> 元 素 变 身 按钮 : 


[type="submit"] 1{ 
position: absolute; 
clip: rect(0 0 0 0);，; 

} 

.btn { 
display: inline-block; 
padding: 2px 12px; 
background-color: #cd0000; 
color: #f£ff; 
font-size: 14px; 
cursor: pointer; 


} 


虽然 样式 上 完美 了 ， 但 却 留 下 了 一 个 键盘 可 访问 性 的 问题 : 当 我 们 使 用 Tab 键 在 页 面 上 遍 
历 元 素 的 时 候 ，focus 的 是 隐藏 的 原生 提交 按钮 ， 而 “代言 人 ”<1labe1> 元 素 无 法 被 focus， 
这 就 会 导致 这 样 的 现象 : 用 户 遍 历 页 面 控件 元 素 一 直 都 很 顺利 ， 突 然 要 到 提交 按钮 的 时 候 ， 页 
面 却 突 然 如 死水 一 般 ， 没 有 任何 元 素 有 out Line 高 亮 。 原 因 就 是 被 focus 的 按钮 元 素 处 于 隐 
藏 状态 ， 用 户 无 法 看 到 out1line 效果 ， 此 时 我 们 就 需要 额外 增加 一 层 CSS 代码 ， 让 <labe1l> 
这 个 “代言 人 ” 连 键盘 focus 状态 也 一 起 代言 了 ， 也 就 是 说 ， 当 我 们 focus 看 不 见 的 提交 按 
钮 的 时 候 ， 让 “代言 人 ”<1labe1> 元 系 模 拟 原 生 的 focus 高 腕 效果 。 

:Focus 1abeL DER | 


outline: lpx dotted Highlight; 
outline: 5px auto ~webkit-focus-ring-color; 








} 

Highlight 是 系统 高 亮色 ， 这 里 用 来 模拟 I[E 和 Firefox 浏览 占 的 outline 效果 相当 
合适 ， 而 下 面 的 DPpPx auto ~webkit-focus-ring—-color 是 在 Chrome 浏览 器 下 使 用 浏 
览 器 日 带 的 focus 外 发 光 outline 效果 ， 这 里 的 5px 其 实 无 关 紧 要 ， 写 3px 效果 也 是 一 
样 的 。 

最 后 ， 束 有 了 非常 人 符合 预 期 的 近乎 原生 的 focus outline 效果 了 ， 如 图 11-2 和 图 11-3 
所 示 。 














11-2” ”Chrome 下 <label> 元 素 outline 效果 -发 光 11-3 ”IE 下 <l1abe1l> 元 素 outline 效果 - 虚 框 


11.1.2 ”真正 的 不 占据 空间 的 outline 及 其 应 用 
outline 是 本 书 介 绍 到 现在 出 现 的 第 一 个 真正 意义 上 的 不 占据 任何 空间 的 属性 。 例 如 ， 内 联 元 
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素 的 上 下 padqding 值 似乎 不 占据 任何 空间 ， 但 是 一 旦 祖先 元 素 overflow 计算 值 不 是 visible， 
同时 padding 值 足够 大 ,滚动 条 束 会 出 现 ， 暴 露出 “不 占据 空间 ”其 实 是 一 个 假象 。 但 是 out1line 
属性 确实 不 占据 任何 空间 , 轮廓 宽度 设置 得 再 宽广 ,也 不 会 影响 任何 元 际 的 任何 布局 , 并 且 outline 
轮廓 是 可 窗 透 的 。 考 虑 到 out Line 是 一 个 从 正 8 开始 惑 被 文 持 的 CSS 属性 ， 这 束 注 定 了 outline 














要 脱离 其 设计 初衷 ， 在 其 他 方面 大 显 神通 ， 例 如 ， 用 于 实现 一 些 看 似 环 手 的 布局 效果 。 

1. 案例 一 : 头像 勇 裁 的 矩形 镁 空 效 果 

有 一 种 图 片 剪 裁 效 果 是 通过 移动 前 景 剪 裁 区 域 实现 的 ， 如 图 11-4 所 示 。 移 动 时 的 样式 如 
图 11-5 所 示 。 


竟 裁 ( 仅 演 示 移 动 ) 预 : 


ob 


竟 裁 ( 仅 演 示 移 动 ) 预 : 


ob 





11-4 头像 剪裁 的 铁 空 矩形 示意 11-5 正在 移动 的 头像 甬 裁 的 铂 空 定形 

这 种 中 间 铂 衬 透 明 、 四 周 蒙 层 遮 并 的 效果 是 如 何 实现 的 呢 ? 

如 果 页 面 没 有 滚动 条 ， 倒 是 可 以 试 试 packground-attachment :fixed 声明 ， 三 层 结 
构 ， 撒 部 原 图 ,中间 诞 音 ， 最 上 面 拖 遇 元 系 ， 拖 上 暇 元 系 背 景 图 请 克 是 底部 原 图 , 且 fixed 定位 ， 
于 是 ， 当 我 们 移动 最 上 层 元 北 时 候 ， 背 景 图 因为 不 跟随 移动 ， 给 人 感觉 吉 是 “ 铂 空 的 ”。 

但 是 ,“ 页 面 没有 滚动 条 ”这 个 限定 太 大 了 ， 实 际 项 目 很 难 满 足 ， 因 此 需要 另 寻 他 法 。 我 
曾 多 次 见 到 过 这 种 做 法 ， 即 半 透 明 的 黑色 蒙 层 实际 上 是 由 很 多 个 矩形 拼 起 来 的 ， 避 开 中 间 区 域 
从 而 形成 铂 空 效果 。 这 种 做 法 比较 符合 现实 认 知 ， 因 此 相对 比较 容易 理解 和 想到 ， 但 是 ， 在 代 
码 世界 里 ， 这 其 实 是 一 种 非常 国 烦 的 做 法 。 

如 果 我 们 把 思维 发 散 ， 克 服 常态 效应 和 惯性 思维 ， 就 会 找到 很 多 非常 简单 的 其 他 方法 ， 例 
如 这 里 要 隆重 出 场 的 outline 属性 ， 核 心 CSS 代码 如 下 : 














.Crop { 
overflow: hidden; 
} 
.Crop > .crop-area { 
width: 80px; height: 80px; 
outline: 256px solid rgba(0,0,0,.95);，; 
Cursor: move; 


} 

用 一 句 话 概括 就 是 使 用 一 个 大 大 的 out Line 来 实现 周围 半 透 明 黑 色 遮 旱 。 因 为 outline 
宽度 设置 再 大 ， 也 不 会 对 布局 产生 任何 影响 ， 至 于 超出 的 区 域 ， 通 过 容器 overflow:hidden 
隐藏 束 可 以 了 。 
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没 错 ， 原 理 束 是 这 么 简单 。 
当然 ， 实 际 的 代码 还 有 很 多 细节 需要 考虑 ， 如 下 : 


.Crop-area { 
outline: 256px solid #000; 
outline: 256px solid rgba(0,0,0,.95);，; 
background: url(about:blank); 





background: linear-gradient (to top, transparent, transparent),;} 
filter: alpha (opacity=50);} 
Cursor: move; 
} 
:root .crop-area { 
filter: none; 


} 


首先 ， IE8 浏览 器 不 支持 rgpba 颜色， 因此 这 里 借助 了 透明 度 滤 镜 进行 兼容 。 由 于 IE9 浏 
兄 颖 同时 文 持 两 者 ， 因 此 借助 :root 进行 了 重 置 ; 其 次 ， 包 括 下 10 在 内 的 正 浏 砚 喜 下 的 馆 罕 
元 素 会 有 点 击 罕 透 的 问题 ， 这 里 采用 的 方法 是 使 用 background 属性 设置 看 不 见 的 背景 内 容 ， 
于 是 残 有 了 上 面 的 CSS 代码 。 

更 完整 的 代码 和 更 切 肤 的 感受 可 以 手动 输入 地 址 http://demo.cssworld.cn/ 11/1-1.php 进行 
体验 。 























案例 二 : 自动 填 满 屏幕 剩余 空间 的 应 用 技巧 

有 不 少 网 站 的 主 背 景 是 日 色 的 ， 故 部 是 深 色 的 ， 于 是 就 会 出 现 这 么 一 个 场景 当主 内 容 很 
少 的 时 候 ， 包 括 底部 在 内 都 不 足 一 屏 ， 或 者 用 户 
显示 器 是 紧 屏 ， 则 很 可 能 束 会 出 现 图 11-6 所 示 的 
这 样 造 从 的 情况 。 

如 何 让 底部 背景 色 正 好 填 满 剩余 屏幕 区 域 
呢 ? 目前 我 知道 的 最 好 的 办 法 就 是 巧 用 outline 
属性 。 假 设 底部 HTML 代码 是 这 样 的 : 11-6 ”局 度 个 中 导致 后 部 下 面 留 日 示意 








Designed & Powered by zhangxinxu 





Zc 栏 档 留 自 

















<div class="footer"> 
<p>Designed &amp; Powered by zhangxinxu</p> 


</div> 
那么 就 有 如 下 CSS 示意 代码 : 
.footer { 


height: 5S5Opx; 
} 
.footer > p { 
position: absolute; 
left: 0O0; right: 0; 
text-align: center; 
padding: 1l5px 0; 
background-color: #a0b3d6; 
outline: 9999px solid #a0b3d6; 
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clip: rect (0 9999px 9999px 0) ; 
} 


最 关键 的 CSS 就 是 设置 一 个 超大 轮廓 范围 的 outline 属性 。 例 如 ， 这 里 是 9999px， 作 
用 是 保证 无 论 屏 幕 多 高 ， 轮 廓 色 块 也 一 定 能 够 覆盖 
但 是 和 porder 属性 不 一 样 ，out1line 是 无 法 指定 方位 的 ， 只 能 被 动 地 四 周 扩展 。 因 此 ， 
outline:9999px solid #a0b3q6 不 仅 会 填 满 底部 方位 的 屏幕 空间 ， 还 会 把 上 面 的 内 容 空间 也 
填 满 。 因 此 ， 我 们 还 需要 做 进一步 处 理 ， 例 如 ， 提 高 主体 内 容 的 层 登 顺序 ， 但 这 显然 成 本 太 高 ， 效 
果 也 不 一 定好 ; 还 有 就 是 采用 这 里 的 clip 剪裁 策略 ， 让 底部 内 容 元 素 绝 对 定位 ， 同 时 以 上 边缘 和 
左边 缘 为 界 进行 裁剪 ， 这 样 ， 就 完全 不 用 担心 outline 会 覆盖 上 面 的 内 容 啦 ! 代码 组 合 为 ; 


{ 

position: absolute; 

clip: rect (0 9999PX 9999PX 0); 
} 


使 用 9999px 这 么 大 的 值 也 是 为 了 确保 100% 填 满 屏幕 。 于 是 , 此 时 的 效果 就 成 了 如 图 11-7 
所 示 的 样子 。 





到 所 SS 人 生 少 








outline 与 底部 十 满 屏幕 的 大 面积 色 块 实例 页 面 
Er 和 Tc 人 村 
代码 
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11-7 底部 色 块 目 动 填 满 屏幕 整 页 示意 
现在 再 也 不 用 担心 屏幕 高 度 太 高 了 ! 


1L2 光标 属性 cursor 





11.2.1 琳 下 满 目的 cursor 属性 值 
想 想 看 ， 你 平时 做 项 目 时 对 CSS 的 cursor 属性 的 使 用 ， 是 不 是 就 是 让 按钮 链接 等 变 为 手 
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形 ? 类 似 这 样 : 


.button { 


cursor: pointer; 


} 





是 不 是 其 他 属性 值 都 没 怎 么 使 用 ? 如 何 真 是 这 样 ， 那 可 真 就 遗憾 了 ， 因 为 cursor 属性 要 





远 比 你 想 得 丰 定 与 实用 得 多 。 

cursor 属性 值 几 乎 可 以 认为 是 当下 文 持 的 关键 字 属 性 值 最 多 的 CSS 属性 ， 没 有 之 一 。 下 
面 瓯 是 按照 功能 特性 对 其 进行 的 分 类 以 及 共 体 解释 描述 。 
单 规 
cursor:auto: cursor 默认 值 。auto 表示 光标 形状 根据 内 容 类 别 浏览 右 目 动 进行 
处 理 。 例 如 ， 输 入 框 里 面 光 标 表现 为 cursor:text， 市 href 属性 的 链接 表现 为 
cursor:pointer， 而 原生 的 <button> 表 现 为 cursor:default 等 。 
cursor:default: 系统 默认 光标 形状 。 昌 然 有 “默认 ”之 意 ， 但 却 不 是 cursor 属 
性 的 默认 值 ， 需 要 注意 。 其 大 致 长 这 个 样子 : 从 。 如 何 严 格 按照 操作 系统 以 及 浏览 器 默 
认 的 光标 行为 呢 ? 目前 Web 页 面 中 所 有 按钮 都 使 用 cursor:pointer 手 形 的 做 法 并 


丰 


























让 这 里 是 可 以 点 击 、 可 以 有 交互 的 。 但 是 如 下 一 些 情 况 的 存在 ， 寻 致 业内 都 习惯 把 所 








有 可 所 击 、 可 交互 的 元 系 的 光标 全 部 变 成 手 形 。 


M4 


护 记 设置 nover 样式 或 者 不 方便 设置 ， 例 如 ， 图 标 hover 变色 效 末 ， 需 要 多 份 
不 同色 背景 图 ， 尤 其 现在 都 喜欢 使 用 工具 合并 ， 默认 生成 的 CSS 是 没有 hover 样 
式 的 ， 需 要 自己 特殊 处 理 。 此 时 ， 如 采 这 个 图 标 按钮 采用 默认 default 光标 ， 容 
易 让 用 户 党 得 这 里 是 不 可 点 击 的 ， 但 是 使 用 pointet 手 形 光 标 ， 由 于 光标 变化 本 
吴 就 是 一 种 hovet 状态 变化 ， 可 以 让 用 户 意 识 到 这 个 元 素 是 “特别 的 ”同样 地 ， 
反 过 来 ， 模 拟 按 钮 的 禁用 效果 的 时 候 ， 也 要 记得 把 cursor:pointer 还 原 成 
cursor:default， 很 多 人 都 不 注意 这 个 细节 。 

由 于 浏览 器 原生 的 按钮 样式 兼容 方面 难以 完美 ， 尤 其 在 下 盛行 的 年 代 ， 黑 框 、 宽 
高 不 一 致 等 一 系列 样式 问题 层 不 出 穷 ， 于 是 大 家 就 使 用 <a> 标 签 来 模拟 按钮 ， 类 似 
这 样 : 

<a href="javascript:" class="button" role="button"> 按 钮 </a> 


而 浏览 需 中 默认 珊 href 属性 的 <a> 标 俭 的 光标 都 是 手 形 ， 而 且 这 个 手 形 效 末 也 
蛋 好 ， 没 有 必要 再 额外 重 置 为 default 默认 形 。 于 是 ， 久 而 久之， 大 家 就 约定 
俗 成 ， 所 有 链接 和 按钮 都 使 用 手 形 。 以 至 于 发 展 到 现在 ， 使 用 原生 的 <button> 
按钮 甚至 下 拉 框 的 时 候 , 都 要 设置 一 个 cursor:pointer。 这 种 奇怪 的 发 展 史 真 


是 比 小 说 还 精彩 。 























cursor :none: 这 个 声明 非常 有 意思 ， 可 以 让 光标 隐藏 不 见 。 什 么 情况 下 我 们 不 需要 
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光标 呢 ? 看 视频 的 时 候 ， 尤 其 全 屏 看 视频 的 时 候 。 此 时 鼠标 一 直 在 界面 上 哆 着 ， 是 很 
但 眼 、 很 难受 的 。 一 般 可 以 这 么 处 理 : 如 果 限 标 闹 止 3 秒 不 动 ， 融 设置 页 面 或 视频 元 
素 cursor :none 隐藏 光标 ， 如 果 有 mousemove 行为 ， 再 显示 即 可 ! 
然而 这 样 做 有 一 个 小 问题 ， 丈 是 IE8 浏览 器 并 不 文 持 cursor :none 声明 ， 从 IE9 浏 
览 右 才 开始 文 持 这 个 属性 ， 怎 么 办 呢 ? 很 简单 ，IE8 浏览 右 使 用 目 定义 的 透明 光标 就 
可 以 了 。 弄 一 张 纯 透明 的 PNG 图 片 ， 然 后 制作 成 cur 格式 ， 束 可 以 实现 全 部 浏览 右 
下 的 光标 隐藏 效果 了 了 。 














眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/11/2-1.php。 
CSS 代码 如 下 : 


.Cur—none 1 


} 


cursor: url(transparent .cur), auto; 


:root .cur-none { 


} 


CUISOIr: NOnNer 


:root 是 9 及 以 上 版 本 浏览 器 才 认 识 的 选择 器 ， 因 此 可 以 把 IE8 和 其 他 浏览 器 区 分 开 。 
2. 链接 和 状态 


cursor :pointer: 光标 表现 为 一 只 伸 出 食指 的 手 ， 类 似 这 样 : 电 。 正 浏览 器 还 支持 
cursor:hand,， 表现 和 cursor:pointer 是 一 样 的 , 但 其 他 浏览 器 并 不 识别 ， 因 此 
没有 任何 使 用 cursor:hand 的 理由 。 我 以 前 其 实 产 生 过 疑问 ， 为 何 “ 手 形 ” 不 统一 
是 cursor:hand? 这 样 通俗 易 懂 又 好 记 。 后 来 算是 明白 了 ,hand 这 个 词 太 概括 和 先 
统 ， 随 着 CSS 发 展 ， 一 定 会 出 现 其 他 与 “ 手 ” 相 关 的 形状 ， 例 如 ， 抓 取 相 关 的 grab 
和 grabbing 等 。 

cursor:help: 帮助 ， 通 常 是 光标 头 上 带 了 个 问号 ， 类 似 这 样 : Re。 它 用 在 帮助 链接 
或 者 包含 提示 信息 的 问号 小 图 标 上 。 目 前 ， 类 似 场景 几乎 都 使 用 cursor:pointer 
手 形 ， 实 际 上 ， 可 以 试 试 使 用 cursor:helPp， 让 我 们 的 交互 细节 和 视觉 呈现 更 加 细 
用 ， 让 用 户 感 受到 我 们 在 产品 上 的 用 心 。 

cursor:progress: 表示 进行 中 的 意思 。 从 语义 上 讲 ， 其 适合 loading 处 理 。 
例如 ， 我 们 点 击 一 个 按钮 发 送 请 求 ， 请 求 发 送出 去 、 返 回 数 据 还 没 接收 到 的 这 段 
时 间 其 实 就 是 一 个 progress 状态 。 按 道理 讲 ， 可 以 让 按钮 的 光标 变 成 
cursor:progress, 例如 ，Windows 7 系统 下 的 六 会 有 一 个 不 停 旋转 的 圈 圈 。 但 
是 我 个 人 更 建议 对 按钮 本 映 的 样子 进行 改变 ， 例如， 加 个 菊花 加 载 效 果 ， 让 用 户 
感知 到 目前 正在 处 理 中 ， 因 为 用 户 的 交互 操作 不 一 定 通过 鼠标 ， 也 有 可 能 通过 键 
盘 ， 如 果 单 纯 使 用 cursor:progress,， 通过 键盘 操作 的 用 户 就 无 法 感知 到 状态 
的 变化 ， 用 户 体 验 其 实 是 不 好 的 。 

但 是 ， 有 一 个 场景 却 非 常 适合 使 用 cursor:progress， 那 就 是 页 面 加 载 的 时 候 。 如 
今 进行 Web 开发 ,没有 JavaScript 几乎 寸步 难 行 ,而 JavaScript 加 载 完 毕 是 需要 一 定时 
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间 的 ， 网 络 不 好 的 时 候 ， 这 个 加 载 时 间 延 人 运 可 能 会 非常 明显 ， 于 是 用 户 就 会 遇 到 明明 
界面 已 经 呈现 了 ， 但 是 点 击 “ 展 开 更 多 ”按钮 却 没 有 任何 反应 ， 原 因 束 是 JavaScript 
还 没有 完全 加 载 完 毕 。 此 时 就 非 第 适合 cursor:progress 出 马 了 ， 我 们 默认 在 
<body> 标 签 上 设置 : 








body { 
CULTSOLT :PEO9TeSS 


} 
然后 ， 当 JavaScript 初始 化 完毕 的 时 候 ， 执 行 类 似 下 面 的 JavaScript 代码 : 
document .body.style.cursor = "auto ，; 


于 是 ， 刚 才 的 加 载 场 景 就 变 成 了 这 样 : Web 页 面 界面 已 经 呈现 ， 用 户 想 去 点 击 “ 展 开 
更 多 ”按钮 ， 绪 末 发 现 此 时 页 面 的 光标 是 cursor :progress 的 转圈 圈 状 态 ， 此 时 ， 
至 少 大 部 分 用 刀 会 意识 到 我 们 的 网 页 还 没有 完全 加 载 完 毕 ， 需 要 再 耐心 等 竺 一会儿， 
减少 了 点 击 “ 展 开 更 多 ”按钮 却 没 有 任何 反应 的 不 安 和 焦虑 感 ， 对 用 户 更 加 友好 了 。 
cursor :wait: 我 们 先 看 看 光标 形状 , 可 能 是 马 这 样 的 转圈 轿 , 或 者 是 沙漏 或 者 是 表 ， 
总 之 和 电脑 死机 时 候 的 光标 是 一 样 的 。 因 此 ， 请 不 要 在 Web 开发 的 时 候 使 用 
cursor:wait 光标 ， 以 免 引 起 用 户 不 必要 的 忍 慨 。 就 算 真 的 不 啊 应 了 了， 浏览 器 目 己 
也 会 处 理 , 我 们 无 须 多 此 一 闪 。 

cursor:context-menu: cursor:context-menu 章 容 性 比较 复 林 ,， Mac OS X 和 
Linux 系统 下 的 Chrome 和 Firefox 浏览 器 是 文 持 的 ， 但 是 Windows 系统 下 的 Chrome 
和 Firefox 浏览 器 却 不 文 持 。 

在 Windows 7 系统 下 ， 表 现 为 箭头 光标 右 下 方 挂 了 今天 (1 封 























个 汽油 桶 Re。 国 ， 加 NF 和 
context-menu 的 字面 意思 是 “上 下 文 菜单 ” 束 昨 六 仁 圭 ) < 

人 和 加 
是 右键 点 击 我 们 的 时 面 或 者 网 页 显示 的 那个 且 单 Ce 向 队 


星期 二 (3 封 ) 这 旦 坊 场 巾 件 


列表 。 如 果 套 用 这 个 语义 ，cursor:context- 

menu 适用 的 场景 是 自 定义 “上 下 文 菜单 ”的 时 候 ， “1 9 全 和 
例如 ， 网 盘 列 表 或 者 邮箱 列表 ， 我 们 可 以 直接 右键 0 

删除 ， 如 图 11-8 所 示 。 

















此 时 ， 如 果 我 们 把 光标 设置 为 cursor :context-menu， 用 户 承 更 容易 意识 到 这 里 有 自 
定义 的 、 快 捷 方 便 的 上 下 文 菜单 功能 ， 而 不 是 傻 傻 指望 用 户 自己 发 现 。 
3. 选择 


cursor :text: 潜台词 是 文字 可 被 选中 ， 形 状 类 似 [。 默 认 文 本 字符 或 者 可 输入 的 单 
复 选 框 的 光标 就 表现 成 这 样 ， 因 为 文字 可 以 被 选中 ， 反 过 来 ， 如 果 文 字 是 不 能 被 选中 
的 ， 光 标 就 不 应 该 是 cursor:text。 

举 个 例子 ,单行 输入 框 ,默认 光标 表现 为 cursor:text, 但 是 我 们 一 旦 让 其 disabled 
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禁用 ， 如 <input disabled>， 则 浏览 器 自动 会 把 光标 改变 成 cursor :default， 
如 图 11-9 所 示 。 

同样 地 , 如 果 我 们 使 用 CSS 让 页 面 上 的 文本 字符 不 ”一 惟 

能 被 选中 ， 则 光标 也 要 跟着 一 起 发 生变 化 ，CSS 代 ”图 11-9 输入 框 禁 用 时 的 光标 示意 
人 码 如 下 : 


articile { 








—~webkit—-user-select: none; 
—moz—usSer-select: none; 
—ms—user-select: none; 


user-select: none; 


cursor: default; 


} 


user-select :none 声明 可 以 让 现代 浏览 左下 的 文本 不 能 被 选中 ， 这 个 很 多 人 都 知道 ， 
但 是 这 些 人 却 没 注意 到 要 设置 cursor:default， 因 为 设置 了 user-select :none 的 
文本 其 光标 依然 表现 为 cursor :text， 显 然 语义 和 表现 就 不 符合 了 ， 明 明 呈 现 的 是 可 选 
中 文本 的 光标 ， 结 果 文 本 却 选 不 了 。 由 忘记 顺便 加 个 cursor:default。 

e Ccursor:vertical-text: 潜台词 是 文字 可 以 王 直 选中， 形状 类 似 一 :。 当 我 们 使 用 
writing-mode 把 文字 排版 从 水 平 改 为 牌 直 的 时 候 ， 文 字 的 光标 束 自 动 表现 为 
cursor:vertical-text。 换 人 句 话 说 ，cursor:vertical-text 就 是 给 垂直 文字 
排 板 用 的 ， 平 党 的 项 目 开 发 很 难 有 机 会 用 到 。 

。 cursor:crosshair: 十 字 光 标 , 形状 类 似 十 , 它 通常 用 在 像素 级 的 框 选 或 点 选 场合 
比方 说 自 定义 的 取 色 工具 ， 如 图 11-10 所 示 。 

e。 cursor:cell: cursor:cell 中 的 cell 和 display:table-cell 中 的 cell 其 
实 可 以 看 成 是 同一 个 东西 ， 也 就 是 单元 格 。 换 句 话说 ，cursor:cell1 用 来 表示 单元 
格 是 可 以 框 选 的 ， 形 状 类 亿 ap。 有 没有 觉得 很 眼熟 ? 没 错 ， 此 光标 为 Excel“ 御 用 ” 光 
标 ， 如 图 11-11 所 示 。 


国 # F9oloE 


和 B G 
| 到 | 2 | 


图 11-10 取 色 工具 使 用 十 字 光 标点 选 颜 色 示 意 11-11 Excel 中 的 cursor:cell 光标 


这 下 大 家 应 该 吏 知 道 cursor:cell 适合 在 哪 种 场景 下 使 用 了 吧 ! 
原生 的 IE8 浏览 右 并 不 文 持 cursor:cell， 右 使 用 ，IE8 需要 目 定 义 。 
4. 拖 和 是 
e。 cursor:move: 光标 变 成 cursor:move， 往往 就 意味 着 当前 元 素 是 可 以 移动 的 ， 形 
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状 类 似 品 。 例 如 ， 头 像 剪 裁 的 时 候 可 能 需要 拖 动 剪裁 框 或 背景 图 ， 就 可 以 设置 
cursor:move, 或 者 有 些 弹 框 组 件 按 住 标题 栏 是 可 以 拖 忠 的 , 我 们 就 可 以 在 标题 栏 上 
设置 cursor:move， 让 用 户 很 直观 地 知道 当前 弹 框 是 可 拖 忠 的 ， 降 低 用 户 的 学 习 成 
本 ， 还 是 很 有 使 用 价值 的 。 

cursor :copy: 光标 变 成 cursor:copy， 往 往 就 意味 着 当前 元 厅 是 可 以 被 复制 的 ， 
形状 类 似 虚 。 原 后 的 IE8 浏览 器 并 不 文 持 ， 大 使 用 ，IE8 需要 自 定义 。 
cursor:alias: 光标 变 成 cursor:alias， 往往 束 意 味 着 当前 元 素 是 可 以 创建 别名 或 
者 快捷 方式 的 ， 形 状 类 似 必 。 原 生 的 IE8 浏览 器 并 不 支持 ， 若 使 用 ，IE8 需要 自 定义 。 
cursor:no-drop: 光标 变 成 cursor: no-drop， 人 往往 就 意味 着 当前 元 素 放 开 到 当 
前 位 置 是 不 允许 的 。 如 果 深 究 其 光标 表现 ， 应 该 类 似 如 图 11-12 所 示 这 般 。 但 实际 上 ， 
浏览 器 的 真实 表现 是 和 cursor:not-allowed 一 模 一 样 的 。 
cursor:not-allowed: 光标 变 成 cursor:not-allowed， 人 往往 就 意味 着 当前 行 
为 是 禁止 的 ， 形 状 类 似 tY。 有 一 些 人 会 给 禁用 态 按钮 设置 cursor :not-alIowed， 
其 本 里 出 发 点 是 好 的 ， 表 示 当 前 按钮 禁止 访问 (不 允许 点 击 )， 似 乎 也 说 得 通 ,， 但 其 实 
是 不 合适 的 ， 因 为 cursor:not-allowed 并 不 是 常规 光标 状态 ， 而 是 与 拖 忠 行为 相 
关 的 ， 它 应 该 是 一 种 主动 行为 下 的 光标 表现 。 例 如 ，Chrome 浏览 器 下 ， 我 们 在 网 页 上 
拖 忠 一 张 图 片 ， 其 光标 表现 如 图 11-13 所 示 。 因 此 ， 禁 用 按钮 光标 还 是 使 用 cursor: 
default 更 合适 ， 然 后 通过 样式 变化 让 用 户 一 眼 就 看 得 出 来 现在 按钮 是 不 可 点 击 的 。 

















站 


总 





系统 自 带 的 drop 无 效 光标 示意 图 11-13 Chrome 浏览 器 下 图 片 拖 暇 无 效 时 的 光标 表现 
滚动 


cursor:all-scroll: 表示 上 下 左右 都 可 以 深 动 , 但 有 一 个 很 糟 糙 的 问题 : Windows 
系统 下 光标 表现 和 cursor:move 一 样 。 再 考虑 到 本 里 作用 场景 局 限 ， 我 觉得 可 以 忽 
略 此 声明 。 

拉 伸 

cursor:col-resize: 光标 形状 类 似 * 外 。 它 适用 于 移动 垂直 线条 ， 如 垂直 参考 线 。 
如 果 要 通过 移动 改变 左右 分 栏 的 宽度 ， 建 议 使 用 cursor:ew-resize。 
cursor:row-resize: 光标 形状 类 似 寺 。 它 适用 于 移动 水 平 线条 ， 如 水 平 参 考 线 。 
如 果 要 通过 移动 改变 上 下 分 栏 的 高 度 ， 建 议 使 用 cursor:ns-resize。 














(1) 单 向 拉 伸 : 总 共 8 个 方位 8 个 不 同 的 关键 字 属 性 值 ， 名 称 和 近似 形状 如 下 。 





11.2 光标 属性 cursor ”313 
。 ”cursor:n-resize， 理 应 是 一 个 间 上 的 单 箭 头 ， 但 通常 是 双向 的 表现 工 。 
e。 cursor:e-resize， 理 应 是 一 个 绷 右 的 单 箭头 ， 但 通 币 是 双 同 的 表现 全 。 
e。 ”cursor:s-resize， 理 应 是 一 个 朝 下 的 单 箭 头 ， 但 通常 是 双向 的 表现 工 。 


CULSCOL -. 


CUIrSoOr 


CUIrSoOr 


w-Fesize， 理 应 是 一 个 明 左 的 单 盘 头 ， 但 通 种 是 双 同 的 表现 4。 








:ne-esize， 理 应 是 一 个 绷 右 上 角 的 单 葡 头 ， 但 通常 是 双 回 的 表现 。 
:nw-zesize， 理 应 是 一 个 绷 左 上 角 的 单 葡 头 ， 但 通常 是 双 回 的 表现 沁 。 




















e。 Cursor:se-zesize， 理 应 是 一 个 级 右 下 角 的 单 简 头 ， 但 通 第 是 双 同 的 表现 沁 。 
e。 Ccursor:sw-resize, ee 下 角 的 单 箭头 ， 但 通 币 是 双 同 的 表现 。 
(2) 双向 拉 伸 : 总共 4 个 对 立方 位 称 和 近似 形状 如 下 。 





@ CuUursor:ew—-resize: ‘do 


@ Cursor:ns-resize: 1 


e Cursor:nesw-resizZe: co 。 


e Cursor:nwse-resize: Yy, 


双向 拉 伸 的 4 个 属性 值 从 正 10 A 考虑 到 单 癌 拉 伸 往往 会 自动 以 双 问 的 形式 呈现 ， 
因此 ， 实 际 开发 的 时 候 ， 我 们 大 可 这 么 处 理 ， 拿 右 下 角 拉 伸 示 意 : 


.resize { 





Cursor: se-resize; 


CuUursor: nwSse—-resize; 


这 样 ， 即 使 有 些 环境 单 癌 拉 伸 束 只 有 一 个 方 癌 的 箭头 ， 有 后 面 的 cursor:nwse-resize 
刻 看 ， 也 不 会 出 现 什 么 明显 的 样式 问题 。 

7. 缩放 

e。 cursor:zoom-in: 光标 形似 放大 镜 岂 、。 

e。 cursor:zoom-out: 光标 形似 缩小 镜 吕 ,。 


这 是 CSS3 新 支持 的 两 个 光标 类 型 。 
8， 抓 取 
。 cursor:grab: 光标 是 一 个 五 指 张 开 的 手 9。 


。 cursor:grabbing: 光标 是 一 个 五 指 收 起 的 手心 。 

这 也 是 CSS3 新 文 持 的 两 个 光标 类 型 。 

或 许 是 因为 操作 系统 并 不 存在 这 样 的 苍 标 类 型 , 不 同 浏览 器 下 这 个 “五 指 张 开 / 收 起 的 手 ” 
的 形状 还 是 有 些 差 异 的 ， 而 其 他 比较 传统 的 光标 则 完全 一 致 ， 并 且 都 和 操作 系统 的 光标 一 模 
一 样 。 

最 后 ， 再 总 结 一 下 琳 下 满 目的 cursor 属性 值 的 兼容 性 情况 (数据 源 自 caniuse.com )。 

e。 可 以 放心 使 用 ， 无 须 担 心 兼 容 性 问题 的 cursor 属性 值 有 auto、crosshair、 


eresize、 Ss-resize、 








default、 move、 text、 wait、 help、 n-resize.、 


WwW-resilize、 ne-resize、 nw-resize、 se-resize、 Sw-resize、pointer、 
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Progress 、 not-allowed、 no-drop、 vertical-text 、 al1L-sScrol1l1、 
col-resize 和 row-resize。 
。 从 IE9 浏览 器 才 开 始 支 持 的 属性 值 有 有 none、alias、cell、copy、ew-resize、 
ns-resize、 nesw-resize、nwse-resize 和 context-menu。 
。 从 Edgel12 才 开 始 文 持 的 属性 值 有 zoom-in 和 zoon-out。 
e。 从 Edgel14 才 开 始 文 持 的 属性 值 有 grab 和 grabbing ( 源 目 MDN 文档 )。 


11.2.2” 自 定义 光标 


从 IE6 开始 ， 我 们 就 可 以 自 定义 网 页 中 的 光标 样式 ， 因 此 ， 对 于 cursor 属性 ， 兼 容 性 都 
不 是 问题 。 例 如 ，IE8 不 支持 上 面 提 到 的 cursor:none， 就 是 通过 自 定 义 手 段 实 现 兼 容 的 : 


.Cur—none 1{ 





Cursor: Url (transparent .cur);}; 


] 


对 于 Chrome 等 浏览 器 ， 可 以 直接 使 用 PNG 图 片 作 为 光标 ， 但 是 正 浏览 右 不 行 。IE 仅 文 
持 专 门 的 .cur 格式 的 光标 文件 ， 需 要 使 用 工具 进行 格式 转换 ， 人 至 于 什么 工具 ， 大 家 可 以 自行 
搜索 一 下 ， 还 是 有 很 多 的 。 

解决 兼容 性 问题 只 是 上 自 定义 光标 的 作用 之 一 ， 自 定义 光标 最 大 的 作用 其 实 是 根据 业务 需要 
对 光标 进行 更 为 彻 故 的 自 定 义 ， 最 常见 的 就 是 点 击 图 片 左 右 半 区 ， 分 别 实现 上 一 张 、 下 一 张 图 
片 切换 预览 的 效 末 ， 如 图 11-14 所 示 。 




















图 11-14 目 定 义 光 标 在 图 片 预览 交互 中 的 应 用 示意 
目 定 义 光 标 很 实用 ， 但 要 讲解 的 知识 点 不 多 ， 束 不 过 多 展开 了 。 
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在 现实 世界 中 ， 太 阳 总 是 东升 西 钞 ， 水 总 是 从 高 往 低 流 ， 这 似乎 就 是 永恒 不 变 的 规律 。 人 
在 理解 抽象 知识 的 时 候 习惯 与 现实 世界 相 上 映射 ， 于 是 会 有 人 认为 CSS 世界 中 的 内 容 目 左 往 右 、 
自 上 而 下 排列 也 是 永恒 不 变 的 。 实 际 上 ，CSS 世界 流向 是 可 以 轻易 进行 颠覆 和 改变 的 。 


12.1 改变 水 平流 问 的 direction 


至 少 在 我 接触 的 这 么 多 项 目 里 ， 没 有 见 到 有 谁 使 用 过 CSS 的 direction 属性 。 

为 什么 呢 ? 是 因为 dqirection 长 得 丑 吗 ? 虽然 说 direction 人 确实 其 貌 不 扬 ， 但 是 CSS 
世界 不 会 有 这 样 的 收视 。 

那 是 因为 兼容 性 吗 ? 更 不 是 了 ，direction 早 在 IE6 时 代 就 已 经 被 支持 了 ， 其 兼容 性 见 
表 12-1。 























表 12-1 direction 属性 兼容 性 表 


2.0+ 1.3+ 任意 版 本 5.5+ 任意 版 本 


那 完 竟 是 什么 原因 呢 ? 

我 认为 多 半 是 因为 宣传 不 够 。 要 是 所 有 前 病人 能 够 人 手 一 本 这 本 书 ， 目 然 吏 不 会 有 这 样 的 
问题 了 ,因为 本 书 热衷 于 挖掘 CSS 属性 的 潜力 ,可 以 让 那些 默默 无 闻 但 有 能 力 的 CSS 属性 烟 烟 
和 生效、 焕发 青春 。direction 就 是 一 个 典型 ， 该 属性 简单 且 好 记 ， 属 性 值 少 ， 兼 容 性 好 ， 关 
键 时 候 省 心 省 力 。 

















12.1.1 direction 简介 


基本 上 ， 大 家 只 要 关心 下 面 这 两 个 属性 值 就 好 了 : 
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direction: ltr; // 默认 值 
direction: Lrtl，; 


其 中 ，1Ltz 是 初始 值 ， 表 示 leftrto-right， 就 是 从 左 往 右 的 意思 。 目 前 东亚 以 及 欧美 文字 书 与 惑 
是 从 左 往 右 的 ; rtl 表示 right-to-left， 束 是 从 右 往 左 的 意思 。 阿 拉 伯 语 〈Arabic)、 和 硕 伯 来 语 
(Hebrew) 等 的 书写 束 是 从 右 往 左 鸭 ， 也 就 是 说 ，qirection 设计 的 本 意 其 实 是 为 了 兼顾 这 类 
语言 。 

但 是 ，Web 开发 接触 多 语言 的 场景 其 实 非常 有 限 ， 但 这 其 实 并 不 妨碍 direction 属性 在 
实际 项 目 中 的 应 用 ， 因 为 dqirection 改变 水 平流 回 的 特性 在 网 页 布局 的 时 候 非 常 有 用 。 

direction 属性 默认 有 这 么 一 个 特性 ， 即 可 以 改变 蔡 换 元 素 或 者 ijnline-block/ 
inline-table 元 素 的 水 乎 呈现 顺序 。 举 个 例子 ， 使 用 如 下 HTML: 


<P dir="rt1"> 
<img src="1.jpg"” alt=" 美 女 "> 
<jima EC=T2 69 1]=m 美景 "> 
</P> 


美女 图 片 DOM 节点 在 美景 图 片 的 前 面 ， 如 果 我 们 忽略 父 级 元 素 ， 是 不 是 页 面 呈 现 的 时 候 应 该 
美女 图 片 在 前 面 ， 美 景 图 片 在 后 面 ? 但 是 这 里 呈现 的 顺序 却 是 反 的 ， 美 景 图 片 显示 在 了 美女 图 
片 的 前 面 ， 如 图 12-1 所 示 。 






































眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/12/1-1.php 或 者 扫 下 面 的 二 维 码 。 
il 





12-1 direction:rtl 下 的 图 片 呈 现 顺 序 


这 种 特性 表现 对 我 们 实际 开发 有 什么 作用 呢 ? 作用 区 是 我 们 可 以 兵 不 血 丸 地 改变 元 素 的 
水 平 呈 现 顺序 。 举 个 例子 ， 我 们 要 写 一 款 confirm 确认 框 组 件 ， 需 要 同时 兼容 东 面 端 和 移动 
端 。 在 果 面 端 呈 现 的 时 候 ,“ 确 认 ” 按 钮 是 在 左边 ,“ 了 取消” 按钮 是 在 右边 ， 如 图 12-2 所 示 。 如 
果 移 动 端 访问 ， 为 了 我 们 手指 点 击 方便 ， 产 品 经 理 希 望 “ 确 认 ” 按 钮 在 右边 ， 而 “取消 ”按钮 
在 左边 ， 如 图 12-3 所 示 。 




















12-2 桌面 端 12-3 ”移动 端 
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请 问 : 如 有 果 你 来 实现 ， 你 会 如 何 处 理 这 种 不 同 设备 、 不 同 按钮 顺序 的 问题 呢 ? 

如 果 按 钮 右 对 齐 ， 我 们 还 可 以 使 用 浮动 float :right 来 解决 ， 但 是 现在 的 关键 问题 是 按 
钮 是 牛 中 对 齐 的 ， 列 说 浮动 了 ， 飞 动 都 满足 不 了 需求 。 一 一 思考 后 ， 你 及 现 没什么 思路 ， 定 不 
是 又 会 去 求助 万 能 的 JavaScript， 根 据 设 备 改变 按钮 元 素 在 DOM 流 中 的 顺序 了 ? 

别 瞎 折腾 啦 ! 有 请 名 不 见 经 传 的 direction 属性 出 场 ! 直接 一 行 direction:rtl， 十 儿 个 
字母 ， 按 钮 顺序 就 会 自动 反 转 ， 兼 容 性 好 ， 代 但 又 少 ， 我 敢 打包 标 ， 这 一 定 是 性 价 比 最 高 的 方法 ! 








Qmedia Screen and (max-width: 480px) { 
.dialog-footer { direction: rtl; } 


} 

当然 ，direction 属性 的 作用 远 不 止 这 些 。 通 常 ， 我 们 让 单行 文字 洲 出 用 点 显示 ， 这 个 
点 通 销 都 是 在 右边 的 ， 省 略 的 都 是 最 后 的 文字 ， 配 合 direction 属性 ， 我 们 可 以 让 这 个 点 打 
在 开头 ， 让 前 面 的 文字 省 略 ，CSS 和 HTML 代码 如 下 : 

.ell { 


width: 240px; 
white—-space: nowrap; 











text-overflow: ellipsis; 
overflow: hidden; 


} 
<p class="ell" qir="lLtzrn> 开 头 是 我 ， 这 是 中 间 ， 然 后 就 是 结束 </Pp> 
<P class="ell" dir="rt1l"> 开 头 是 我 ， 这 是 中 间 ， 然 后 就 是 结束 </p> 


HTML 代码 中 的 dir 属性 和 CSS 中 direction 属性 作用 一 样 ， 使 用 HTML 属性 是 为 了 
方便 测试 。 效 果 如 图 12-4 所 示 。 眼 见 为 实 ， 手 动 输入 http://demo.cssworld.cn/12/1-2.php 或 者 扫 
下 面 的 二 维 码 。 [me [em] 


关头 定 防 ， 这 征 中 国 ， 然 后 束 … 








… 我 ， 这 是 中 间 ， 然 后 就 是 结束 


图 12-4 不 同 direction 属性 值 下 的 文字 洲 出 打点 效果 


这 种 开头 打点 的 效果 在 有 些 场合 非常 有 用 。 比 方 说 ， 我 们 的 动态 文字 后 面 跟 了 一 些 标记 性 
的 图 标 ， 如 果 后 面 打 点 ， 束 很 容易 把 这 些 需要 呈现 的 图 标 一 并 变 成 点 ， 于 是 我 们 不 得 不 给 文字 
套 一 层 标 签 并 借助 max-wiqdth 来 只 让 文字 打点 ， 那 可 是 相当 抵 烦 的 。 但 有 了 direction 属 
性 ， 有 了 前 置 打点 ， 事 情 就 简单 多 了 ， 只 要 配合 text-align:1left 控制 下 ,就 完全 不 用 担心 
后 面 的 标记 性 的 图 标 会 被 隐藏 掉 啦 ! 

direction 属性 还 可 以 轻松 改变 表格 中 列 的 呈现 顺序 。 人 例如， 我们 对 表 12-1 设置 一 个 
qirection:rt1， 了 束 会 变 成 表 12-2 所 示 的 这 样 ， 原 本 第 一 列 的 Chrome 跑 到 最 后 了 。 

表 12-2 改变 了 direction 属性 值 后 的 CSS direction 属性 兼容 性 表 


Si 任意 版 本 92+ 任意 版 本 2.0+ 
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qirectionL:rtl 还 可 以 让 text-justify 两 端 对 齐 元 系 , 最 后 一 行 洛 蛙 的 元 素 右 对 齐 
显示 。 例 如 ， 使 用 下 面 的 CSS 和 HTML: 


P { 
text—-align: justify; 
direction: rtl1; 

} 


<p> 


V 


<img Src="1.]JpPpgn" 


V 


<img Src="1.]JpPpgn" 


V 


<img src="1.jJpg" 
</p> 


结果 如 图 12-5 所 示 。 了 眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/12/1-3.php 或 者 扫 下 面 的 
二 维 但 。 





12-5 direction:rtl 时 text-justify 最 后 一 行 右 对 齐 


只 要 是 内 联 元 系 ， 只 要 与 书写 流 相 关 ， 部 可 以 试 试 direction 属性 。 

对 了 , 还 有 一 个 小 点 值得 一 提 。 在 不 支持 text-align:start/eng 的 浏览 器 中 (如 IE)， 
不 同 的 direction 属性 值 会 改变 text—-align 属性 的 初始 值 : 当 direction 值 为 1tr 的 时 
候 ，text-alLign 的 初始 值 是 left; 当 direction 值 为 rtl 的 时 候 ，text-align 的 初始 
值 是 rignt。 








12.1.2 direction 的 黄金 搭档 unicode-biqdi 


细心 的 读者 可 能 注意 到 了 ， direction 属性 似乎 只 能 改变 图 片 或 者 按钮 的 呈现 顺序 ， 但 
对 纯 字 符 内 容 (尤其 中 文 ) 好 像 并 没有 什么 效 末 ， 但 实际 上 ， 我 们 也 是 可 以 指定 中 文 每 个 字符 
部 反问 呈现 的 ， 方 法 就 是 借助 direction 的 搭档 属性 unicode-pbidi。 

单 看 unicode-bidi 的 名 称 ， 你 可 能 会 觉得 有 点 儿 怪 ,会 觉得 它 可 能 是 哪个 浏览 器 私 
有 的 属性 ， 实 际 上 不 是 的 ，unicode-bidi 是 一 个 所 有 浏览 器 部 支 持 的 良好 的 CSS 属性 。 
至 于 它 为 什么 会 有 这 么 奇怪 的 名 称 , 我 这 里 解释 一 下 , 你 可 以 把 unicode 理解 为 “字符 集 ”， 
而 biqi 则 是 单词 pidirectionality 的 人 简写， 中 文 意思 是 “ 双 同 性 ”。 网 页 中 的 字符 很 
多 时 候 是 混合 的 , 例如 中 文 和 瑞 文 夹 末 , 或 者 阿拉 伯 文 和 英文 夹杂 ， 此 时 就 会 出 现 文 本 阅读 
方 同 不 一 样 的 情况 ,阿拉伯 文 是 从 石 往 左 读 ， 天文 是 从 左 往 右 ， 而 这 种 混合 方 回 同 时 出 现 的 
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现象 就 称 为 “ 双 问 性 ”， 因 此 unicode-bigdi 作用 就 是 明确 字符 出 现 “ 双 同性 ”时 应 当 有 
的 表现 。 

unicode-bidi 兼容 性 比较 好 的 几 个 属性 值 如 下 : 

unicode-bidi: normal; // 默认 值 


unicode-bidi: embed; 


unicode-bidi: bidi-~override; 


现 有 的 对 unicode-pbidi 这 几 个 属性 值 的 解释 几乎 都 是 星 深 难 懂 的， 我 在 这 里 给 出 一 个 
通俗 易 恒 的 解释 。 

(1) normal: 正常 排列 。 假 设 设置 了 direction:rtl， 则 图 片 、 按 钮 以 及 问号 、 加 号 
之 类 的 字符 会 从 右 往 左 显示 ， 但 是 中 文 、 瑞 文字 符 还 是 从 左 往 右 显 示 。 

(2) embed: embed 属性 值 要 想起 作用 ， 只 能 作用 在 内 联 元 叉 上 。 在 通 利 情况 下 ，embead 
属性 值 的 表现 和 normal 是 一 样 的 ， 寻 致 很 多 人 不 明日 embed 到 抵 和 normal 有 什么 区 列 。 
其 实 它 们 的 区 别 很 简单 ，embed 属性 值 的 字符 排序 是 独立 内 磐 的 ， 不 受 外 部 影响 。 我 们 来 看 一 
个 例子 ，CSS 和 HTML 如 下 : 














.rtl1 { 
direction: rtl; 
unicode-bidi: bidi-override; 
} 
.rt > span { 
background-color: #ddqd; 
} 
<P class=nrt1Ln> 开 头 是 我 ， <span style="unicode-bidi:normal; "> 这 是 中 间 </span>， 然后 是 结束 </p> 
<p class=n"trt1ln> 开 头 是 我 ，<span style="unicode-bidi:embed;"> 这 是 中 间 </span>， 人 然后 是 结束 </p> 


结果 如 图 12-6 所 示 。 


unicode-bidi:normal 


4 


束 结 是 后 然 ， 间 中 是 这 ， 我 是 头 开 


束 结 是 后 然 ， 巡 是 中 间 ， 我 是 头 开 


unicode -bidi:embed 


图 12-6 unicode-bidi:embed 和 unicode-bidi:normal 对 比 


因为 <p> 元 素 设置 了 unicode-pbidi:pbidi-override， 所 以 会 强制 所 有 人 字符 按照 
direction 设置 的 方 同 全 部 反 回 排列。 但 是 从 图 12-6 可 以 看 出 ， 设 置 了 unicode- 
bidi:normal 的 <span> 元 素 直 接受 外 部 的 unicode-bidi 属性 有 影响， 也 全 部 反问 呈现 了 ， 
但 是 下 一 行 设置 了 unicode-bidi:embed 的 “这 是 中 间 ” 四 个 字 反 而 是 “normal” 排 序 。 

原因 就 在 于 ，unicode-bidi:embed 会 开局 一 个 看 不 见 的 磐 入 层 ， 然 后 自己 在 里 面 重 新 
排序 ， 但 unicode-bidi:normal 并 不 会 开局 一 个 额外 的 嵌入 层 ， 于 是 总 是 受 外 部 的 
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unicode-bidi 影 啊 。 

这 一 对 比 效 未 有 对 应 的 实例 页 面 , 有 兴趣 的 读者 可 手动 输入 http:/demo， 国 ] 
cssworld.cn/12/1-4.php 或 者 扫 右 侧 的 二 维 码 。 

embeqd 属性 值 的 作用 原理 是 在 元 素 的 开始 和 结束 位 置 插入 特殊 字符 加 时 
以 实现 的 ， 可 以 理解 为 在 元 素 开始 位 置 添加 了 一 个 01202A 字符 (如果 TS 
direction 值 是 1tr) 或 者 U+202B 字符 〈 如 果 direction 值 是 rt1)， 加 | cp: 
并 在 该 元 素 结束 位 置 添加 了 一 个 U+202C 字符 。 

因 些 ， 实 际 上 我 们 无 须 设置 unicodqe-bidi:embedq， 直 接 在 <span> 元 素 前 后 分 别 插入 
U+202B 字符 和 U+202c 字符 也 可 以 实现 类 似 的 效果 。 具 体 如 下 : 

<p class="rt1l"> 开 头 是 我 ，<span>&#x202B; 这 是 中 | 则 &#x202C;</span>， 然 后 是 结束 </p> 

本 人 亲 测 有 效 。 

(3) pidi-override: 顾名思义 ，bidi-override 就 是 “ 重 写 双 回 排 序 规则 ” 通 音 样 
式 表 现 为 所 有 的 字符 都 按照 统一 的 direction 顺序 排列 ， 例 如 ， 知 设置 direction:rtl， 
则 所 有 字符 都 会 从 右 往 左 反 回 排列 ， 效 采 强 烈 。 

bidi-override 的 作用 原理 也 是 通过 插入 特殊 字符 实现 的 ， 可 以 理解 为 在 元 素 开始 位 置 
或 者 每 个 匿名 子 级 块 盒 的 开始 位 置 〈( 如 果 有 的 话 ) 添加 一 个 U+202D 字符 (如 果 direction 
值 是 1tr) 或 者 Ut+202E 字符 (如果 direction 值 是 rt1),， 并 在 该 元 素 结束 位 置 添 加 了 一 个 
U+202C 字符 。 

因此 ， 实 际 上 我 们 无 须 设置 unicode-bidi:bidi-override 以 及 direction 属性 ， 
直接 在 元 素 前 后 分 别 插入 U+202E 字符 和 U+202C 字符 (可 缺 省 ) 也 可 以 实现 字符 反 向 排列 效 
果 。 例 如 : 

p02; = 二 四 再 六 八仙 1 
最 后 页 面 呈 现 的 文字 就 是 “十 九 八 七 六 五 四 三 二 一 ” 还 是 插 有 意思 的 。 

规范 文档 中 有 这 么 一 句 话 很 有 意思 : Unicode 算法 对 般 入 有 61 层 的 限制 ， 应 该 注意 尽量 不 
要 使 用 值 不 为 normal 的 unicode-bidi， 除 非 适 当 《 也 吏 是 在 元 素 影响 有 限 的 前 提 下 )。 

unicode-bidi 属性 虽然 很 有 意思 , 但 是 改变 字符 的 呈现 顺序 往往 和 我 们 的 日 钊 需求 很 难 











































































契合 ， 因 此 ， 其 出 场 机 会 实际 上 要 比 airection 低 一 些 ， 但 存在 即 有 价值 ， 总 会 有 场合 非常 
适合 使 用 unicode-bidi 属性 的 。 


12.2 改变 CSS 志 界 纵横 规则 的 writing-mode 


writing-mode 这 个 CSS 属性 ， 是 不 是 很 少见 到 、 很 少 用 到 ?就 像 我们 将 不 各 见 的 文字 
称 为 “生僻 字 ” 一 样 ， 我 们 可 以 把 不 常见 的 CSS 属性 叫 作 “生僻 属性 ” writing-mode 给 我 
们 的 感觉 融 是 一 个 “生僻 属性 ”一 一 很 绊 ， 可 有 可 无 。 

但 是 实际 上 ， 我 们 都 错 了 ， 大 错 特 错 ! writing-mode 可 以 说 是 CSS 世界 里 面 最 强大 的 
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CSS 属性 了 ， 它 是 本 书 最 后 出 场 的 大 咖 ， 直 接 其 医 CSS 世界 的 众多 规则 。 

writing—-mode 之 所 以 给 人 “生僻 ”的 感 党 ， 是 有 原因 的 。 实 际 上 writing-mode 这 个 
CSS 属性 很 早 就 诞生 了 ，IE5.5 浏览 器 就 已 经 支持 它 了 。 

那 束 奇怪 了 ! writing-mode 既然 这 么 历 害 ， 出 现 的 时 间 早 、 资 格 老 ， 为 什么 一 直 沉 和 了 
差不多 20 年 呢 ? 

那 是 因为 在 很 长 一 段 时 间 里 ，Firefox、Chrome 这 些 现代 浏览 器 都 不 支持 writing-mode， 
writing-mode 基本 上 束 是 了 正 浏 抽 磊 的 私有 产物 。 很 多 人 对 正 一 直 没 什么 好 感 ， 对 吧 ? 由 此 
及 彼 ， 目 然 对 writing-modqde 也 不 每 见 。 

然而 , 束 在 我 们 被 流行 前 病 技 术 一 叶 珊 目的 时 低 , 各 大 现代 浏 跑 苍 纷 纷 对 writing-mode 
实现 了 更 加 标准 的 文 持 《主要 得 益 于 Firefox 浏览 器 的 积极 跟 进 )。 也 就 是 说 ， 不 知 从 什么 时 候 
起 ， 四 -mode 的 兼容 性 已 经 不 成 问题 了 ， 加 上 该 属性 本 身 特 性 强大 一 一 我 仿佛 看 到 了 一 
不 对 ， 是 大 放 光 辉 的 圆 月 ! 


12.2.1 writing-mode 原本 的 作用 

和 float 属性 有 些 类 似 ，writing-mode 原本 是 为 控制 内 联 元 系 的 显示 而 设计 的 〈( 即 所 
谓 的 文本 布局 )。 因 为 在 亚洲 ,尤其 像 中 国 这 样 的 东亚 国家 ， 存 在 文字 的 排版 不 是 水 平 而 是 垂直 
的 情况 ， 如 中 国 的 古诗 文 ， 如 图 12-7 所 示 。 





























因此 ，writing-mode 就 是 用 来 实现 文字 竖 向 呈现 的 。 语 不 互 于 包 
A 春 细 垂 妆 

1. writing-mode 的 语法 风 叶 下 成 

writing-mode 的 语法 学 习 要 求 比 其 他 CSS 属性 要 高 一 些 ， 及 





为 我 们 需要 记 住 两 套 不 同 的 语法 : 一 个 是 IE 私有 属性 ， 一 个 是 CSS3 
规范 属性 。 

先 看 一 下 未 来 所 需 的 CSS3 语法 : 

/* 关键 字 值 */ 


writing-mode: horizontal-tb; /* 默认 值 */ 


writing-mode: vertical-rl; 


12-7 古诗 竖 版 示意 








writing-mode: vertical-lr; 


/* 全 局 值 一 一 关键 字 inherit，IE8 及 以 上 版 本 浏览 器 支持 ; initial 和 unset，IE13 才 支持 */ 

writing-mode: inherit; 

writing-mode: initial; 

writing-mode: unset; 

我 们 通过 名 称 就 能 知道 各 个 关键 字 属 性 值 大 概 的 意思 。 例如 ， 默认 值 norizontal-tb 表 
示 文 本 流 是 水 平方 同 (horizontal〉 的 ， 元 对 是 从 上 往 下 de 堆 车 的 。 

vertical-rl 表示 文本 是 垂直 方向 (vertical ) 展示 ， 然 后 阅读 的 顺序 是 从 右 往 左 
Cright-left)， 和 我 们 陶 读 古诗 的 顺序 一 致 。 

vertical-lr 表示 文本 是 垂直 方向 (vertical) 展示 ， 然 后 阅读 的 顺序 还 是 默认 的 从 左 往 
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右 〈left-right)， 即 仅仅 是 水 平 变 垂直 。 

图 12-8 给 出 了 各 个 值 下 的 中 英文 表现 的 对 照 (参考 自 MDN)"。 

下 面 来 看 一 下 老 IE 浏览 器 的 语法 ， 由 于 历史 原因 ， 其 显得 相当 复杂 ，IE 官方 文档 显示 
如 下 : 


-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | 1r 

















| 1 | 二 让 
根据 我 的 测试 〈 非 原生 IE8、IE9)，-ms- 私 有 区 
前 级 是 可 省 略 的 ， 直 接 用 writing-mode 所 有 下 i 
浏览 器 都 是 支持 的 。 站 
IE 浏览 器 下 的 关键 字 值 多 达 11 个 。 关 了 
。 1r-tb: IE7 及 以 上 版 本 浏览 器 支持 。 初 始 四 
值 。 内 容 从 左 往 右 、 从 上 往 下 水 平流 动 ， 
并 且 下 一 行 水 平 元 素 在 上 一 行 元 素 的 下 各 了 
面 ， 所 有 符号 都 是 直立 定位 。 大 部 分 书写 国情 
系统 都 使 用 这 种 布局 。 图 12-8 writing-modqe 和 文本 展示 效果 示意 


。 rl-tb: IE7 及 以 上 版 本 浏 贤 絮 文 持 。 内 容 从 石 往 左 、 从 上 往 下 水 平流 动 ， 并 且 下 一 
行 水 平 元 素 在 上 一 行 元 素 的 下 面 ， 所 有 符号 都 是 直立 定位 。 这 种 布局 适合 从 右 往 左 书 
写 的 语言 ， 如 阿拉 伯 语 、 和 希 伯 来 语 、 塔 安 那 文 和 叙利亚 语 。 

。 tb-rl: IE7 及 以 上 版 本 浏览 器 支持 。 内 容 从 上 往 下 、 从 石 往 左 王 直 流动 ， 下 一 个 王 
直行 定位 于 前 一 个 垂直 行 的 左边 ， 全 角 符 号 直立 定位 ， 非 全 角 符 号 《也 可 以 称 作 罕 拉 
丁 文 或 者 罕 假 名 符号 ) 顺 时 针 方 同 旋转 90” 。 这 种 布局 多 见于 东亚 文字 排版 。 

。 bt-rl: IE7 及 以 上 版 本 浏览 万 文 持 。 内 容 从 下 入 上、 从 右 往 左 垂 直流 动 ， 下 一 个 年 
直行 定位 于 前 一 个 垂直 行 的 左边 ， 全 角 符 号 直立 定位 ， 非 全 角 符 号 《也 可 以 被 称 作 军 
拉丁 文 或 者 窗 假 名 符号 ) 顺 时 针 方 向 旋转 90”。 此 布局 多 见于 东亚 垂直 排版 从 右 往 左 
的 文本 块 上 。 

。 tb-lr: IE8 及 以 上 版 本 浏览 右 文 持 。 内 容 从 上 入 下、 从 左 往 右 垂 直流 动 。 下 一 个 年 
直行 在 前 一 个 的 右边 。 

。 bt-lr: IE8 及 以 上 版 本 浏览 器 文 持 。 内 容 从 下 往 上 、 从 无 往 右 垂直 流动 。 

。 1lr-bt: IE8 及 以 上 版 本 浏览 占 文 持 。 内 容 从 下 往 上 、 从 左 往 右 水 平流 动 。 下 一 个 水 平 
行 在 前 一 行 的 上 面 。 

。 rl-bt: IE8 及 以 上 版 本 浏览 器 文 持 。 内 容 从 下 往 上 、 从 右 往 左 水 平流 动 。 

e。 1lr: IE9 及 以 上 版 本 浏览 器 支持 。 在 SVG 和 HTML 元 素 上 使 用 。 等 同 于 lr-tb。 

e。 rl: IE9 及 以 上 版 本 浏览 器 支持 。 在 SVG 和 HTML 元 素 上 使 用 。 等 同 于 *1-tb。 


















































GD 大 家 会 发 现 英文 字符 横 过 来 了 ， 可 以 试 试 使 用 text-orientation:upright 让 其 直立 ， 正 不 支持 ，Firefox 和 
Chrome 支持 。 
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e。 tb: IE9 及 以 上 版 本 浏览 器 支持 。 在 SVG 和 HTML 元 素 上 使 用 。 等 同 于 tb-r1l。 
各 个 属性 值 的 表现 如 图 12-9 所 示 (参考 微软 官网 )。 








Now is the ttme for all good men to 
come to the atd of their country. 


Now is the trme for all good men to 
Come to the aid of 也 et country 


come to the aid of their country. 
Now 1s the trme for all good men to 


.come to the aid of their country 
Now 1 the trme for all good men to 
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12-9 正 浏 览 嚣 下 writing-mode 各 个 属性 值 表现 


补充 说 明 如 下 。 

。 相同 的 writing-mode 属性 值 并 不 会 累加 。 例如 , 如 果 父 子 元 系 均 设置 了 writing- 
mode:tb-rl， 只 会 演 染 一 次 ， 子 元 素 并 不 会 两 次 “旋转 ”。 

。 在 丰 浏 览 嚣 下 ,如果 一 个 日 里 具有 布局 的 元 素 ( 不 是 纯 文 本 之 类 元 素 )writing-mode 
属性 值 和 父 元 又 不 同 ， 那 么 当 子 元 叉 的 布局 流 变 化 的 时 候 ， 其 父 元 素 坐 标 系统 的 可 用 
空间 会 被 充分 利用 。 这 上段 文字 太 过 术语 化 ， 我 解释 一 下 就 是 : 在 下 浏览 器 下 ， 当 布局 
元 素 从 水 平 变 成 垂直 的 时 候 〈 举 个 例子 )， 你 束 想 象 为 元 素 在 垂直 方 问 是 100$ 目 适应 
父 元 系 高 上 度 的 。 因 此 ，IE 浏览 器 下 不 包括 Edge 13 及 以 上 版 本 )， 元 素 vertical 
流 的 时 候 你 会 发 现 高 度 高 得 吓人 ， 布 局 和 其 他 现代 浏览 器 不 一 样 ， 正 是 这 个 原因 。 

e。 虽然 Chrome 和 Opera 认识 tb-rl 等 老 的 正 属性 值 , 但 也 仪 仪 是 认识 而 已 , 并 没有 任 
何 实际 效果 ! 

2. 需要 天 注 的 writing-mode 属性 值 

从 直接 开发 的 角度 而 言 ， 虽 然 正 支持 多 达 11 个 私有 的 属性 值 ， 但 是 我 们 需要 关注 的 也 就 

那么 几 个 。 究 苋 是 哪 几 个 呢 ? 
如 果 你 的 项 目 震 要 兼容 IE7， 则 只 要 关注 两 个 就 可 以 了 ， 即 初始 值 1r-tb 和 tb-rl， 对 
应 于 CSS3 规范 中 的 horizontal-tb 和 verticalL-rl。 

如 果 你 的 项 目 只 需要 兼容 IE8 及 以 上 版 本 浏览 器 ， 巷 喜 你 ， 你 可 以 和 CSS3 规范 属性 完全 对 应 
上 上 了, 而且 IE8 下 的 writing-mode 要 比 IE7 强大 得 多 。 我 们 需要 关注 初始 值 1-r-tb、tb-rl 和 
tb-lr， 分 别 对 应 于 CSS3 中 的 horizontal-tb、vertical-rl 和 vertical-lr。 

看 上 去 复 淋 的 属性 是 不 是 变 得 很 简单 了 ? 重新 整理 出 一 个 实战 版 : 

writing-mode: lr-tb | tb-rl | tb-lr (IE8+); 

writing-mode: horizontal-tb | vertical-rl | vertical-lr; 


对 ， 大 家 只 要 记 住 上 面 这 几 个 就 可 以 了 ! 因为 所 谓 的 垂直 排版 ， 实 际 Web 开发 是 很 少 过 到 的 。 
有 人 可 能 要 有 疑问 了 : 既然 writing-mode 实现 的 文本 垂直 排版 场景 有 限 ， 那 么 还 有 什 
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么 学 习 的 意义 呢 ? 
前 面 也 所 到 了 ， 虽 然 创 造 writing-mode 的 本 意 是 文本 布局 ， 但 是 ， 其 市 来 的 文档 流 同 的 改 
变 ， 不 仅 改变 了 我 们 多 年 来 正 彰 的 CSS 认 知 ， 同 时 可 以 巧妙 地 实现 很 多 意 想 不 到 的 需求 和 效果 。 


12.2.2 ”writing-mode 不 经 意 改 变 了 哪些 规则 


writing-mode 将 页 面 默认 的 水 平流 改 成 了 垂 生 流 ， 题 履 了 我 们 以 往 的 很 多 认 知 ， 基 于 原 
本 水 平方 同 才 适用 的 规则 全 部 都 可 以 在 垂下 方 同 适用 ! 下 面 所 有 和 梁 例 均 使 用 如 下 CSS 代码 : 


.Verticle-mode { 





writing-mode: tb-rl; 
—webkit—-writing—-mode: vertical-ril; 
writing-mode: vertical-rl; 


} 

1. 水 平方 向 也 能 margin 合并 

在 CSS2 的 规范 文档 中 有 这 么 一 句 话 :“The bottom margin of an in-flow block-level element 
always collapses with the top margin of 1lts next in-flow block-level sibling, unless that sibling has 
clearance.” 其 清 清 楚楚 地 写 着 bottom margin 和 top margin 会 合并 。 人 然而， 这 是 CSS2 
文档 中 的 描述 ， 在 CSS3 中 ， 由 于 writing-mode 的 存在 ， 这 种 说 法 就 不 严谨 了 ， 而 应 该 是 对 
垂直 流 方向 的 margin 值 会 发 生 合并 。 换 名 话说 ， 如 果 元 素 是 默认 的 水 平流 ， 则 垂直 margin 
会 合并 ; 如 果 元 素 是 垂直 流 ， 则 水 平 margin 会 合 3 

眼见 为 实 , 手动 输入 http://demo.cssworld.cn/12/2-1.php 或 者 扫 下 面 的 二 维 码 。 结果 如 图 12-10 
所 示 。 











默认 流 - 垂 直 margin 合 并 


margin:20px; 
margin:20px; 


垂直 流 - 水 平 margin 合 并 
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图 12-10 writing-mode 下 水 平 margin 合并 


2. 普通 块 元 素 可 以 使 用 margin:auto 实现 牌 直 居中 





因为 默认 width 是 100$ 目 适应 的 ，auto 才 有 计算 值 可 依 ， 而 在 牌 直 方向 ，height 没有 任 
何 设置 的 时 候 高 度 绝 不 会 自动 和 父 级 高 度 一 致 ， 因 此 auto 没有 计算 空间 ， 于 是 无 法 实现 垂直 
居中 。 但 是 ， 在 writing-mode 的 世界 里 ， 纵 横 规 则 已 经 改变 ， 元 系 的 行为 表现 发 生 了 翻天 
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履 地 的 变化 。 

(1) 图 片 元 素 。 

我 们 先 来 看 一 下 ， 图 片 元 系 margin:auto 实现 垂直 居中 ， 手 动 输入 
http://demo.cssworld.cn/12/2-2.php 或 者 扫 右 侧 的 二 维 码 。 其 中 图 片 的 CSS 代 证 四 
但 如 下 : 站 


img { 
display: block; 






margin-top: auto; margin-bottom: auto; 


} 


Firefox 浏览 器 中 的 效果 如 图 12-11 所 示 。 但 是 ， 在 IE 浏览 器 下 ， 却 没有 垂直 居中 ， 如 图 
12-12 所 示 。 





和 管理 器 
12-11 writing-mode 下 图 片 牌 12-12 writing-mode 下 图 片 并 未 
直 居 中 效果 (Firefox 浏览 器 》 王 直 居中 (IE 浏览 器 ) 


奇怪 ? ! 难道 下 不 文 持 垂 直流 下 的 王 直 居中 ? 非 也 ， 根据 我 的 测试 ,是 图 片 这 类 蔡 换 元 素 
貌似 不 行 ， 普 通 的 plock 元 素 都 是 可 以 的 。 

(2) 普通 块 状 元 素 。 

手动 输入 http://demo.cssworld.cn/12/2-3.php 或 者 扫 下 面 的 二 维 码 。 此 时 ， 不 仅 正 11 Edge， 
甚至 IE8 浏览 喜 ， 都 王 直 居中 了 ， 如 图 12-13 所 示 。 





3 浙 管 理 器 








12-13 writing-mode 下 块 元 素 垂 直 居 中 1 (IE 浏览 器 ) 
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3. 可 以 使 用 text-align:center 实现 图 片 牌 直 居 中 
前 面 提 过 , margin:auto 无 法 实现 耻 浏 览 句 下 的 图 片 垂直 居中 ， 如 果 非 要 让 图 片 垂直 后 
中 ， 可 以 使 用 text-align:center， 手 动 输 入 http://demo.cssworld.cn/12/2-4.php 或 者 扫 下 面 
的 二 维 码 。 结 果 ， 之 前 病 恢 怖 的 正 浏 览 器 活 了 ， 如 图 12-14 所 示 。 








理 器 宝 制 人 台 ] 同 式 程 序 守 Co™8 





图 12-14 writing-mode 下 块 元 素 垂 直 居 中 2 (IE 浏览 器 ) 


4. 可 以 使 用 text-indent 实现 文字 下 沉 效 果 
是 个 真实 项 目的 例子 ， 要 增加 一 个 按钮 按 下 文字 下 沉 的 效果 。 如 果 你 来 实现 ， 你 会 怎么 
ee 行 高 控制 ? 但 默认 文本 束 不 大 中 (对 于 高 度 上 自 适 应 的 按钮 ， line-height 下 沉 是 为 J 
避免 按钮 高 度 变 化 ， 默 认 是 不 能 完全 居中 的 )。padding+height 能 精确 控制 ， 又 略 烦 。 然 而 ， 
I —mode ei I ee mo 耳 接 使 用 text-indent A 

















re 因为 text-indent 不 会 影响 元 素 原 本 的 全 布局 

感 兴趣 的 读者 可 以 手动 输入 http://demo.cssworld.cn/12/2-5.php 或 者 扫 碳 
侧 的 三 维 码 。 

核心 CSS 和 HTML 代码 如 下 : 





.btn { 


} 

.btn:active { 
text-indent: 2px; 

} 

.verticle-mode { 
writing-mode: tb-rl; 
writing-mode: vertical-rl; 


} 





<a href="javascript:" class="btn verticle-mode"> 领 </a> 
此 时 ， 点 击 这 个 按钮 的 时 候 ， 文 字 就 会 往 下 一 沉 ， 非 毅 图 12-15 writing-mode 下 
有 按 下 去 的 感觉 ， 如 图 12-15 所 示 。 ES 





为 什么 有 如 此 效果 呢 ? 这 要 归功 于 中 文 。 在 垂直 流 排版 的 时 下 沉 效 雪 
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候 ， 中 文 不 会 旋转 ， 还 是 直立 的 。 也 就 是 次， 虽然 肉眼 看 上 去 文字 没什么 变化 ， 但 是 布局 流 已 
经 发 生 了 变化 ， 以 前 类 似 text-indent/letter-spacing 等 水 平 控制 属性 都 作用 在 垂直 方 
器 了 。 

当然 ， 这 个 例子 比较 巧 的 是 按钮 文字 只 有 一 个 ， 要 是 按钮 文字 有 多 个 ， 怕 是 就 没 这 么 轻松 
和 绝妙 了 。 

5. 可 以 实现 全 兼容 的 icon fonts 图 标的 旋转 效果 

在 老 的 正 浏览 嚣 下， 我 们 要 实现 小 图 标的 旋转 效果 是 很 抹 烦 的 ， 因 为 要 使 用 正 的 旋转 或 
翻转 滤 镜 什么 的 。 

有 J 了 writing-mode， 在 有 些 场景 下 ， 我 们 就 不 用 这 么 抹 烦 了 。 

前 面 你 可 能 也 注意 到 了 ， 当 writing-mode 把 文档 变 成 垂直 流 的 时 候 ， 我 们 的 英文 和 数 
字符 号 是 会 “ 躺 着 ”显示 的 ， 也 就 是 天 然 90° 旋 转 了 。 此 时 ， 我 们 不 妨 脑 洞 大 开 一 下 : Bs 
们 使 用 icon fonts 技术 让 这 些 字符 直接 映射 霖 个 小 图 标 , 那 已 不 是 轻 轻 松 松 就 3 
可 以 实现 小 图 标 旋转 了 ? 关键 在 于 ， 就 算是 IE6 和 IE7 浏览 器 对 其 也 是 文 持 
的 ， 这 要 比 滤 镜 什么 的 简单 多 了 ! 

眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/12/2-6.php 或 者 扫 右 侧 的 二 
维 码 。 

核心 CSS 和 HTML 代码 如 下 : 

















Qfont-face { 
font-family: Arrow; 
src: url("/fonts/12/arrow.eot?").; 
src: local ("Any"), 
url("/fonts/12/arrow.woff"); 
} 
.licon-—play { 
font-family: Arrow; 


| 


.verticle-mode { 
writing-mode: tb-rl; 
writing-mode: vertical-rl; 
} 
<span class="icon-play">r</span> 箭头 绷 右 
<span class="icon-play verticle-mode">r</span> 箭头 绷 下 


结果 如 图 12-16 所 示 。 


默认 流 
> 箭头 朝 右 
垂直 流 
Y 第 头 朝 下 





图 12-16 writing-mode 下 兼容 的 字体 图 标 旋 转 效 果 
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可 以 看 到 ， 虽 然 IE8 不 支持 transform， 但 是 旋转 轻松 达成 。 

6. 充分 利用 高 度 的 高 度 自 适应 布局 

当 文 档 变 成 垂直 流 的 时 候 ，height 高 度 天 然 自 适应 ， 于 是 ， 我 们 可 以 充分 利用 高 度 的 高 
度 上 自 适 应 布局 …… 突 然 友 现 ， 可 以 列举 的 案例 实在 太 多 了 ， 这 样 下 去 ， 本 书 没 法 完结 了 ， 上 所 以 
往 下 的 案例 都 从 略 了 吧 。 

总 之 , 理论 上 讲 , 有 了 writing-mode, 我 们 能 够 做 的 事情 比 以 前 多 了 很 多 。 就 介 想 不 到 ， 
不 怕 做 不 到 。 


12.2.3 writing-mode 和 direction 的 关系 

















writing-mode、direction 和 unicode-bidi 是 CSS 世界 中 三 大 可 以 改变 文本 布局 
流 回 的 属性 ， 其 中 direction 和 unicode-bidi 属于 近亲 , 经 常 一 起 使 用 ,也 是 仪 有 的 两 个 
不 受 CSS3 的 all 属性 影响 的 CSS 属性 ， 基 本 上 束 是 和 内 联 元 了 系 一 起 使 用 。 它 貌似 是 为 阿拉 伯 
文字 设计 的 。 

乍 一 看 ,writing-mode 似乎 包含 了 direction 和 unicode-bidi 的 某 些 功能 和 行为 ， 
例如 ，vertical-rl 的 rl 和 direction 的 ztl 值 有 相似 之 处 ， 都 是 从 右 往 左 。 然 而 ， 实 
际 上 两 者 是 没有 交集 的 。 因 为 vertical-rl 此 时 的 文档 流 为 牌 直 方 同 ，r1 表示 水 平方 向 ， 此 
时 再 设置 dijrection:rtl, 实际 上 值 rt1 改变 的 是 垂直 方 同 的 内 联 元 系 的 文本 方 同 , 一 横 一 
纵 ， 没 有 交集 。 而 且 writing-mode 可 以 对 块 状 元 系 产 生 有 影响 ， 直 接 改 变 了 CSS 世界 的 纵横 
规则 ， 要 比 direction 强大 得 多 。 它 貌似 是 为 东亚 文字 设计 的 。 

然而 ，CSS 的 奇妙 之 处 就 在 于 : 某 些 特性 当初 可 能 束 是 为 菜 些 图 文 排版 设计 的 ， 但 是 我 们 
可 以 利用 它 带 来 的 特性 发 挥 自己 的 创造 力 ， 实 现 其 他 很 多 意 想 不 到 的 效果 。 因 此 ， 上 面 出 现 的 
“三 剑客 ”部 是 非常 好 的 资源 。 

另外 ，CSS 逻辑 属性 (也 就 是 *-start/*-end 属性 ) 的 出 现 其 实 与 现代 浏览 器 加 强 了 对 
流 的 支持 有 天 ， 包 括 老 江 湖 airection， 以 及 最 近 跟 进 的 writing—-mode。 

本 书 正文 部 分 到 此 为 止 ， 感谢 阅读 ! 
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